の検索コンポーネントgotcha

時々私はAPIからデータを取得していたtypeaheadコンポーネントに取り組んでいました、そして、私は検索質問が検索フィールドの値と異なっているのを観察しました.
< div >
若干の調査の後、私は、これが起こっていると気がつきましたuseState が非同期なので、値が設定される前にフェッチが起こっていますbr/>
<> P >
クラスをハイライト表示する

const handleSearch = (e) => {
    setQuery(e.target.value);
    fetch(`http://example.com/users.json?query=${query}`)
      .then(response => response.json())
      .then(data => setRecords(data));
  }

< div >
いくつかの調査の後、私は、イベントの取得呼び出しを間違ったアプローチであることに気付きました.むしろ、クエリの副作用としてデータを取得しなければなりませんquery コンポーネントの変更p >
<川合>https://twitter.com/ryanflorence/status/1125041041063665666」
< div . class ="Lagagchen - nal twitter - tweetchen - main main "data url ="https://twitter.com/ryanflorence/status/1125041041063665666」
< div class ="Lagagchen - nor - twitter - tweettle - nor - header "

< div class = "Lagagchen - nor - twitter - tweetchen - dieフルネーム"
ライアンフローレンス
< div >
< div class ="Lagagchen - nor - twitter - tweettle - en - user name "
< div >
< div . class ="Lagagchen - nal twitter- tweettle - nor - twitter-ロゴ"

< div >
< div >
< div class > "Lagagchen - nor - twitter - tweettle - die body "
問題は「この効果がいつ実行されるのか」という問題ではありません.「この効果がいつ実行されるのか」という質問は、「この効果がどのような状態で同期しているか」ということです.
< div >
< div class > "Lagagchen - nor - twitter- tweettle - her - date "
午後14時14分- 2019年5月05日
< div >
< div class > "Lagagchen - nor - twitter - tweettle - se action "
< div >
< div >
<川合>
私たちは使うべきですuseEffect この問題を解決する.When the value of query 変化useEffect はAPIからデータを取得するbr/>
<> P >
クラスをハイライト表示する

const handleSearch = (e) => {
    setQuery(e.target.value);
  }

  useEffect(() = > {
    fetch(`http://example.com/users.json?query=${query}`)
      .then(response => response.json())
      .then(data => setRecords(data));
  }, [query]);

< div >
この例では、query イベントハンドラとフェッチはuseEffect ブロックp >
完全解のための< p >
https://gist.github.com/c0d3b1n/469016b05c8020d0b20f130a8bdf94aa