reactjs - useEffectの多くの呼び出しに - React

Question

useEffectが変更された場合にのみメソッドでコードを実行したいのですがproductType、ページが読み込まれるとすぐに、console.log が 6 ～ 7 回以上実行されていることがわかります。これは望ましくありません。

これが私のコードの要約です：

const [productType, setProductType] = useState(null);

useEffect(() => {
  console.log(productType);
}, productType);

useEffectアイデアは、変更時にこれでコードを実行するproductTypeことです。ドロップダウンで次のように変更しています。

<MyDropdownComponent
  value={productType}
  onChange={e => setExportType(e.target.value)}
  width={200}
/>

console.logsですから、このビュー/テンプレートをロードすると、コンソールで 6-7-8のようになったのはなぜだろうnull..

score 2 · Accepted Answer

useEffectフックは、2 番目のパラメーターとして配列を想定しています。彼らはおそらく、空の配列 (エフェクトを 1 回だけ実行する) とデフォルト (レンダリングごとに実行する) を区別するために、この方法を行ったのでしょうarguments。

次のような配列を渡す必要があります。

useEffect(() => {
  console.log(productType);
}, [productType]);

1 に答える 1