单击后退按钮后 useEffect 显示双重结果

Question

我有一个程序，我在其中使用 useEffect 来获取数据库中的产品。我将 useEffect 与空数组一起用作依赖项，因此仅在呈现组件时才加载数据。问题是，如果我在使用浏览器的后退按钮后立即更改页面，组件会显示双倍的产品。

代码

useEffect(() => {
    dispatch(fetchProducts());
  }, []);

Answer 1

由于您 dispatch 一个 redux 操作，您似乎将获取的产品存储在 redux 上。 redux 状态不受路由更改的影响，并存储在整个应用程序中，直到手动清除。

所以你可以做的是，你可以在你的 reducer 中定义另一个名为 cleanUpProducts 的动作，在这个函数中，你可以清理 redux 商店中存储的产品。

之后，您可以在 useEffect（相当于 componentWillUnmount）挂钩的 return 函数中分派此操作，例如：

useEffect(() => {
    dispatch(fetchProducts());
    return () => {
        dispatch(cleanUpProducts());
    }
}, []);

useEffect shows double result after back button click