如何绕过 React 的 useEffect() "missing dependency" 警告？

Question

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

React Hook useEffect has a missing dependency: 'messages'. Either include it or remove the dependency array. You can also do a functional update 'handleMessages(m => ...)' if you only need 'messages' in the 'handleMessages' call.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 函数中传递一个回调（作为反应调用它们的功能更新），但我仍然收到警告。

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

Answer 1

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

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

Answer 2

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

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

Answer 3

如果您对此有把握，请在显示错误的行前添加 // eslint-disable-next-line。

如何绕过 React 的 useEffect() "missing dependency" 警告？

How can I bypass React's useEffect() "missing dependency" warning?

javascript

socket.io

reactjs

use-effect