Question

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

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

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

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

Answer 1

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

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

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

Answer 2

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

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

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

使用具有依赖项数组的 useEffect 调度操作

2 个答案: