子 React コンポーネントに渡された useEffect を使用すると、関数が複数回呼び出される

Question

複数の ChildComponent タグを持つページがあり、ユーザーがどの ChildComponent をクリックしたかに基づいて、各 ChildComponent にどの API を呼び出すかを指示したいと考えています。 onClick() はモーダルを開きます。

モーダルを開いたときに API 呼び出しが 2 回行われることに気付きました。モーダルを閉じると、API 呼び出しが再度行われます。

この投稿から学んだことは、React は正しく動作する、つまり React の機能コンポーネントで関数を複数回呼び出すということです。

一度に axios API 呼び出しが 1 つだけになるようにこれを構造化する別の方法はありますか?

リーリー リーリー ああああ

Answer 1

React 18 を使用している場合、反応性でこのエラーが発生します。この投稿を確認してください https://taig.medium.com/prevent-react-from-triggering-useeffect-twice-307a475714d7

Answer 2

あなたの問題とタスクをよく理解できたら、解決策を書こうと思います。

親コンポーネントにモーダル コントロール状態があるため、変更があるたびに親コンポーネントが再レンダリングされ、子コンポーネントも同様に再レンダリングされます。また、関数は JS のオブジェクトであるため、フェッチ関数は毎回異なるリンクで再レンダリングすると、ChildComponent の useEffect は関数が変更されたと認識します。

したがって、最良の解決策は、 export default memo(ChildComponent) (You can import memo from "react") のように、子コンポーネントにメモを追加することだと思います。その後、fetchPosts と handleOnclick を useCallback でラップする必要があります。 const fetchPosts = useCallback(() => doSomething(), [])

のような結果が得られます。 ＃＃＃それが役に立てば幸い。