了解 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引用是stable ，因此您可以毫无问题地将其添加到依赖数组中，它仍然只会在挂载时运行：

只要将相同的存储实例传递给，调度 function 引用将是稳定的。 通常，该存储实例在应用程序中永远不会更改。

但是，React hooks lint 规则不知道 dispatch 应该是稳定的，并且会警告应该将 dispatch 变量添加到依赖 arrays 以用于 useEffect 和 useCallback。 最简单的解决方案就是这样做：

 export const Todos() = () => { const dispatch = useDispatch(); useEffect(() => { dispatch(fetchTodos()) // Safe to add dispatch to the dependencies array }, [dispatch]) }

所以你可以安全地改变},[]); 到},[dispatch]);