ReactJS 16.13.1 Hook监听器内状态不一致问题求助

嘿，这是React里非常典型的闭包陷阱问题，我来给你拆解一下原因和解决办法！

问题根源 #

当你在第一个useEffect（依赖为空数组的那个）里调用handleEvents(socket)时，handleThisEvent函数已经被创建，它捕获了当时的myData状态——也就是初始的空数组[]。

之后虽然你通过axios请求更新了myData，但已经绑定到socket事件上的handleThisEvent函数并不会重新创建，它内部引用的myData始终是最初的空数组，自然就拿不到更新后的值了。

解决方案（按推荐程度排序） #

1. 使用React状态的函数式更新（最推荐）

setMyData可以接收一个函数作为参数，这个函数的参数是当前最新的状态值，完全不需要依赖外部的myData变量，完美避开闭包问题：

const handleThisEvent = payload => {
  setMyData(prevMyData => {
    const myDataCloned = [...prevMyData];
    onHandleEvent(myDataCloned, payload);
    return myDataCloned;
  });
};

这样不管socket事件什么时候触发，都能拿到最新的myData状态，而且代码简洁，符合React的设计思路。

2. 让socket事件监听随myData更新重新绑定

如果你的业务场景需要直接访问myData，可以把socket事件的绑定放到依赖myData的useEffect里，同时记得清理旧的监听避免内存泄漏：

// 先把socket存到ref里，避免每次创建新实例
const socketRef = useRef(null);

useEffect(() => {
  someAxiosCallWrapped((response) => {
    const infos = response.data;
    setMyData(infos.data);
    socketRef.current = getSocket(info.socketNamespace);
  });
}, []);

useEffect(() => {
  if (!socketRef.current || !myData.length) return;
  
  // 先解绑旧的监听（如果有的话）
  socketRef.current.off('EVENT_NAME', handleThisEvent);
  // 绑定新的监听，此时handleThisEvent会捕获最新的myData
  socketRef.current.on('EVENT_NAME', handleThisEvent);
  
  return () => {
    // 组件卸载时清理监听
    socketRef.current?.off('EVENT_NAME', handleThisEvent);
  };
}, [myData]);

3. 使用useRef保存最新的myData

用useRef来同步最新的myData状态，因为ref的current属性是可变的，不会受闭包影响：

const myDataRef = useRef([]);

// 每次myData更新时，同步到ref
useEffect(() => {
  myDataRef.current = myData;
}, [myData]);

const handleThisEvent = payload => {
  // 直接从ref里拿最新的myData
  const myDataCloned = [...myDataRef.current];
  onHandleEvent(myDataCloned, payload);
  setMyData(myDataCloned);
};

总结 #

最推荐第一种函数式更新的方案，它不需要额外的ref或复杂的监听逻辑，是React官方推荐的处理依赖状态更新的方式，能从根本上解决闭包导致的旧状态引用问题。

内容的提问来源于stack exchange，提问作者Benjyyyyy