使用 useEffect 和依赖数组的调度操作答案

【问题标题】：Dispatch action with useEffect with dependency array使用 useEffect 和依赖数组的调度操作
【发布时间】：2021-08-31 06:28:19
【问题描述】：

在我的 useEffect 代码中，我正在调度从切片中获取的操作。

但是它会抛出错误“React Hook useEffect has missing dependencies”，因为我在使用动作和调度的钩子内部

...
const { actions } = useDataListSlice();
....
useEffect(() => {
  dispatch(actions.loadInitialState());
}, []);

我可以添加动作并分派到依赖数组，但我不确定在其中添加动作和分派是否正确

【问题讨论】：

stackoverflow.com/questions/55840294/…这个问题深入描述了你的问题
@Simas.B stackoverflow.com/questions/55840294/ 这讨论了 useEffect 中的自定义函数，但 dispatch 是来自库的函数，因此该链接中未讨论如何处理。

标签： reactjs react-hooks

【解决方案1】：

你的意思是警告还是错误？如果是警告，只需像这样在依赖项中添加调度

useeffect(()=>{
 // dispatch something
},[dispatch])

如果您认为警告不会破坏您的应用程序，那么您可以将依赖项留空并添加 // eslint-disable-next-line

【讨论】：

我知道 // eslint-disable-next-line 这是一个选项，但我觉得应该避免这种情况
然后在你的 useEffect 依赖项中添加调度

【解决方案2】：

这里有更深入的阅读，https://github.com/facebook/create-react-app/issues/6880#issuecomment-485912528。长话短说，开发人员需要根据您期望的功能来决定哪些依赖项应该添加到依赖项数组中，哪些不应该添加，eslint 之类的工具将无法 100% 准确地显示代码中的错误，但是它可以引起您的注意部分代码，也许您应该更仔细地检查。要回答您自己的问题，请询问您自己何时希望调用 React.useEffect，哪些依赖项可以更改，以及您是否需要在这些更改时调用 React.useEffect。不向依赖数组添加正确正确的依赖可能会导致在需要时不会调用钩子的错误，而且将React.useEffect 中使用的所有依赖添加到依赖数组可能会导致在不应该调用钩子时调用钩子的错误.

在这个特定的场景中，问问自己什么时候需要加载初始状态：

仅在组件安装上？将依赖数组留空；
动作或调度何时改变？向依赖数组添加所需的操作。

【讨论】：