多次调用 useEffect - React

Question

我想仅在 productType 更改时在 useEffect 方法中执行代码，一旦页面加载，我就可以识别 console.log 执行了超过 6-7 次，这是我不想要的。

这是我的代码摘要：

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

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

想法是当productType变化时执行这个useEffect中的代码，我正在像这样在下拉菜单中更改它：

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

所以我想知道为什么当我加载这个 view/template 时，我在控制台中得到了 null 的 6-7-8 console.logs..

Answer 1

useEffect Hook 需要一个数组作为第二个参数。他们可能这样做是为了区分一个空数组（运行效果只有一次）和默认值（运行在每个渲染器上），如果他们使用 arguments 他们就不可能拥有直接。

您需要像这样传递一个数组：

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

To many calls of useEffect - React