对于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。

Answer 1

useEffect钩希望将数组作为第二个参数。他们可能用这种方法来区分一个空数组（仅运行一次效果）和默认数组（在每个渲染上运行），如果直接使用arguments则无法实现。

您需要传递这样的数组：

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