理解react-hooks/exhaustive-deps useEffect和调度事件

Question

我有这个警告：

React Hook useEffect has a missing dependency: 'dispatch'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

用这个代码：

import { useDispatch } from 'react-redux';
import openSocket from "socket.io-client";
import {populateCustomers} from './slices/CustomerSlice';
const ENDPOINT = config.ENDPOINT; //socket address

function App() {
  const dispatch = useDispatch();
  useEffect(() => {
    const socket = openSocket(ENDPOINT);
    //hydrate
    socket.on("hydrateCustomers",data=>dispatch(populateCustomers(data)))

  },[]);

这个想法是，套接字打开一次，并且在服务器发生事件时 - 数据从响应分派到 redux 存储中。

我很确定我想要一个空的依赖项数组，因为我只想运行一次......有没有更好的方法来处理这种情况？或者我应该忽略这个警告？

Answer 1

该useDispatch引用是稳定的，因此您可以将其添加到依赖项数组中而不会出现问题，它仍然只能在安装时运行：

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

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

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

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

这样您就可以安全地更改},[]);为},[dispatch]);