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

问题描述

我有这个警告:

React Hook useEffect 缺少依赖项:'dispatch'.包括它或删除依赖数组 react-hooks/exhaustive-deps

使用此代码:

import { useDispatch } from 'react-redux';从socket.io-client"导入 openSocket；从'./slices/CustomerSlice'导入{populateCustomers}；常量端点 = config.ENDPOINT;//套接字地址功能应用(){const dispatch = useDispatch();useEffect(() => {const socket = openSocket(ENDPOINT);//水合物socket.on("hydraCustomers",data=>dispatch(populateCustomers(data)))},[]);

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

我很确定我想要一个空的依赖数组，因为我只希望它运行一次......有没有更好的方法来处理这种情况?还是应该忽略此警告?

解决方案

useDispatch 参考是 stable，因此您可以毫无问题地将其添加到依赖项数组中，它仍然只能在挂载时运行:

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

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

export const Todos() = () =>{const dispatch = useDispatch();useEffect(() => {调度(fetchTodos())//安全地将调度添加到依赖项数组}， [派遣])}

所以你可以安全地将 },[]); 改为 },[dispatch]);

I have this warning:

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

with this code:

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)))

  },[]);

the idea is that a socket is opened once, and on server events - data is dispatched from the response into the redux store.

I'm pretty sure I want an empty dependency array, as I only want this to run once... Is there a better way to handle this situation? or should I ignore this warning?

解决方案

The useDispatch reference is stable, so you can add it to the dependency array without issue, it'll still only run on mount:

So you can safely change },[]); to },[dispatch]);

这篇关于了解 react-hooks/exhaustive-deps useEffect 和调度事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！