問題タブ [use-effect]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - useEffect() フック内で呼び出される関数はどこで宣言すればよいですか?
したがってuseEffect、状態に依存する関数を呼び出す a を使用すると、次のような状況になります。
例：
質問:
この場合、someFunction内部で宣言する必要がありますか、useEffect()それとも外部 (ただし、コンポーネントの本体の内部) に保持しても安全ですか?
dependency配列に追加することもできますが、 trigger.
useEffect()は新しいレンダリングの後に実行されるため、内部で呼び出している関数の新しいコピーがあると想定しても安全ですか?
フック内でいつ関数を宣言する必要があるuseEffectか、またはいつ依存関係配列に追加することが必須であるかについての基本的なルールはありますか?
編集:これらの関数は新しい最新の変数useEffectにアクセスする必要があるため、これらの関数の新しいコピーが必要であることに注意してください。state
ノート：
このコードは、CodeSandbox で次のeslint 警告をトリガーします。それはうまくいきますが。
React フック React.useEffect には依存関係がありません: 「someFunction」。それを含めるか、依存配列を削除してください。(react-hooks/exhaustive-deps)eslint
実際のシナリオ:
これは簡単な例です。私の実際のケースでは、これはフィルター コンポーネントを含む製品検索ページです。したがって、フィルターをクリックしてアクティブ化すると (たとえば、 )、状態変数を「リッスン」している がprice <= 50トリガーされます。次に、その効果はを計算する関数 (例では) を呼び出し、 new で新しい状態を設定します。useEffect()activePriceFilterssomeFunctionfilteredListproductListfilteredList
スニペット