即使值(第二个参数)与以前的值相同，我如何执行 useEffect - React

Question

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

这是我的代码：

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

我的下拉列表包含类型：

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

即使我从下拉列表中选择相同的值两次以再次下载文件，我也想要再次下载文件，例如我选择"已售出的产品"，然后文件被下载，我立即再次从下拉列表中选择相同的东西("已售出的产品"(我希望再次下载文件，我该如何实现？

我知道hoooks只有在值更改/与以前的值不同时才起作用，而不是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}
/>

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

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

或者，您可以在onChange运行exportProducts，根本不使用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}
/>
)