1

これは私の反応コンポーネント内のコードです

const mockFetch = () => Promise.resolve({
  json: () => new Promise((resolve) => setTimeout(() => resolve({
    student1: {
      studentName: 'student1'
    },
    student2: {
      studentName: 'student2'
    },
    student3: {
      studentName: 'student3'
    }
  }), 250))
})

function MyApp() {
  const [result, setResult] = React.useState([]);
  const [queryString, setQueryString] = React.useState("");

  function searchHandler() {
    mockFetch(
        "{url that i defined in real code}"
      )
      .then(response => response.json())
      .then(data => {
        Object.keys(data).filter(element => {
          if (queryString === "") {
            setResult(result.push(data[element].studentName));
          } else if (data[element].studentName.toLowerCase().includes(queryString.toLowerCase())) {
            setResult(result.push(data[element].studentName));
          }
          setResult(result.join("<br/>"));
        })
      });

  }

  return (
    <div>
      <div>
        <input type = "text" placeholder = "Search..."
          onChange={event => setQueryString(event.target.value)} />
        <button onClick={searchHandler}>Search</button>
      </div>
      <output>
        Result:
        <br /><br />{result}<br /><br /><br /> <br />
        Query String:
        <br /><br />{queryString}<br /><br />
      </output>
    </div>
  );
}

ReactDOM.render(<MyApp />, document.querySelector('#root'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

2回目のクリックでstudentNameによってAPI応答から学生を検索(フィルタリング)しようとすると、result.push()タイプエラーで壊れます。

私が達成したい動作：

  1. ボタンをクリックすると、searchAPIデータをフィルタリングしたいstudentName
  2. が空の場合queryString、すべてのアイテムをフィルタリングせずに表示したい
  3. <br/>タグを挟んで結果を表示したい
4

2 に答える 2

2

新しい値を状態セッターに広める必要があります。つまり、次のようになります。

setResult(result.push(data[element].studentName));

する必要があります

setResult([...result, data[element].studentName]);

また、ブロックelementの代わりに使用するつもりだったと思います。あなたのフィルターはロジックですが、間違っています。あなたのコールバック関数は、状態が設定されていないブール値の結果を返すことを意図しています。おそらくあなたはするつもりでしたdata[element]filterObject.keys(data).forEach(...

于 2021-10-20T19:45:36.977 に答える