即使值（第二个参数）与先前的值相同，我如何执行useEffect-React

Roxy'Pro

当用户选择产品类型时，我正在下载包含该特定类型产品的文件。

这是我的代码：

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

useEffect(() => {
 if (productType!= null) {
      exportProducts();
    }
}, productType);

我的下拉列表包含以下类型：

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

我甚至希望从下拉菜单中选择两次相同的值来再次下载文件，例如，我选择“出售产品”，然后下载文件，然后我又立即从下拉菜单中选择相同的东西（“出售产品”），我希望文件再次下载，我该如何实现？

我知道钩子只有在值被更改/与先前值不同时才起作用，而不是useEffect中的代码将再次呈现...

所以我的问题是，即使第二个参数的值相同，我如何在useEffect中调用代码？

尿布

您可以这样做：

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

useEffect(() => {
   if (productType !== null) {
       exportProducts();
   }
}, [productTypeChanges]);

JSX：

<MyDropdownComponent
  value={productType}
  onChange={e => {
      setProductTypeChanges(productTypeChanges + 1);
      setProductType(e.target.value);
  }}
  width={200}
/>

如果要确保正在调用render函数，则需要更改prop或state。由于setProductType使用相同的值调用your ，因此不会强制渲染。也许存在一个更优雅的解决方案，但这是解决此问题的一种方法。

当然，您还需要确保onChange在用户再次选择相同的值时将调用该方法。

另外，您也可以运行exportProducts它onChange，根本不使用它useEffect。但是，由于该问题明确提及，useEffect因此从技术上讲，这本身不是正确的答案。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。