在 useEffect 函数中插入“dispatch”函数作为依赖项是否安全？

Question

如果我用这个

  useEffect(() => {
dispatch(fetchToDos())}, [debouncedToDo, loginInfo.isLogin])

我收到此警告

React Hook useEffect 缺少依赖项：“dispatch”。包含它或删除依赖项数组react-hooks/exhaustive-deps

如果我在依赖项数组中包含“dispatch”，警告就会消失。

像这样：

  useEffect(() => {
dispatch(fetchToDos())}, [dispatch, debouncedToDo, loginInfo.isLogin])

Answer 1

是的，dispatch添加到useEffect钩子的依赖数组中是安全的。

来自文档

信息

dispatch只要将相同的存储实例传递给 . 函数引用就会保持稳定<Provider>。通常，该存储实例在应用程序中永远不会更改。

然而，React hooks lint 规则不知道它dispatch应该是稳定的，并且会警告该dispatch变量应该添加到useEffect和的依赖数组中useCallback。最简单的解决方案就是这样做：

export const Todos() = () => {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchTodos())
  // Safe to add dispatch to the dependencies array
  }, [dispatch])
}