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

<块引用>

只要将相同的 store 实例传递给 .通常，该存储实例永远不会在应用程序中更改。

<块引用>

然而，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])
}

因此您可以安全地将 },[]); 更改为 },[dispatch]);

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

1 个答案: