如何绕过 React 的 useEffect() “缺少依赖项”警告？

Posted 2023-03-17

【中文标题】如何绕过 React 的 useEffect() “缺少依赖项”警告？

【英文标题】：How can I bypass React's useEffect() "missing dependency" warning?

【发布时间】：2021-11-01 10:34:29

【问题描述】：

我正在使用 socket.io 在 React 中创建一个聊天应用程序。我不需要以下 useEffect() 多次运行，并且此警告消息要求我解决的内容与我仅设置一次套接字消息处理程序的意图相冲突：

React Hook useEffect 缺少一个依赖项：'messages'。包括它或删除依赖数组。如果您在“handleMessages”调用中只需要“消息”，您也可以进行功能更新“handleMessages(m => ...)”。eslintreact-hooks/exhaustive-deps

export default function Group(props) 

    const [_broadcastOptions, handleBroadcastOptions] = useState(false);
    const [messages, handleMessages] = useState([]);
    const textValue = useRef('');
    const bottomScrollRef = useRef();
    const socket = useRef();
   
    useEffect(()=>
        console.log('bruh');

        socket.current = io('http://0.0.0.0:3001');
        
        socket.current.on('connect', ()=> 
            console.log('socket connection status: ' + socket.current.connected);
            socket.current.emit('enter-room', getRoomId(window.location.pathname));
        );
        socket.current.on('message', m => 
            console.log('message received: ' + JSON.stringify(m));
            handleMessages([...messages, m]);
        );
    , []);
return (...);

编辑：我尝试在我的 handleMessages 函数中传递一个回调（功能更新，因为 react 调用它们），但我仍然收到警告。

[![在此处输入图片描述][2]][2]

【参考方案1】：

如果您改为使用 handleMessages 的回调，则无需使用外部 messages 标识符（无论如何它都会在旧闭包中）。

    socket.current.on('message', m => 
        console.log('message received: ' + JSON.stringify(m));
        handleMessages(messages => [...messages, m]);
    );

【讨论】：

执行此操作后我仍然收到警告

警告是否完全相同，警告messages？这没有任何意义......

是的，是一样的。我用警告的截图编辑了我的帖子

您忘记在回调中使用参数 - 完全复制并粘贴我的答案中的代码。 handleMessages(messages => [...messages, m]);

【参考方案2】：

在这种情况下，您应该使用handleMessages 中的回调来更新状态。你可以在这里阅读更多内容：https://reactjs.org/docs/hooks-reference.html#functional-updates

handleMessages((preMessage) => [...preMessage, m]);

【讨论】：

我试过这个。奇怪的是，我仍然收到警告

你没有preMessage。只需复制粘贴

【参考方案3】：

如果您确定这一点，请在显示错误的行之前添加// eslint-disable-next-line。