Question

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

这是我的代码：

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

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

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

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

即使我从下拉菜单中选择两次相同的值来再次下载文件，例如，我选择“出售产品”，然后下载文件，我还是立即从下拉菜单中选择相同的东西（“出售产品”）我想要再次下载文件，如何实现？

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

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

Answer 1

您可以这样做：

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函数，则需要更改props或state。由于您的setProductType用相同的值调用，因此不会强制渲染。也许存在一个更优雅的解决方案，但这是解决此问题的一种方法。

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

或者，您可以在exportProducts中运行onChange，而根本不使用useEffect。但是，由于该问题明确提及了useEffect，因此从技术上讲，这本身并不是一个正确的答案。

Answer 2

我认为您无需在此用例中使用useEffect

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

const handleChange = e => {
    e.target.value !== null && exportProducts();
    setProductType(e.target.value)
}

return (
<MyDropdownComponent
  value={productType}
  onChange={handleChange}
  width={200}
/>
)

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

2 个答案: