socket.io-client 和 useEffect 没有得到更新的反应钩子

Question

我正在尝试在套接字上获取更新的反应挂钩值，但它没有得到更新的值。 每当我更新我的反应挂钩值时，它都不会反映在套接字内部。 下面是我的代码

//socketIO in client 

useEffect(() => {

    const socket = socketIOClient(ENDPOINT);
    socket.on("FromAPI", data => {

      console.log(muteList); // here is my react hook 
    });


  }, []);

套接字服务器每 20 秒发送一次更新。 我该怎么做才能在套接字中获取更新的反应挂钩值

Answer 1

如果muteList碰巧不用于渲染，则可以使用 ref 代替：

const muteListRef = useRef([]);

并用muteListRef.current = someNewMuteList更改它。

如果使用muteList进行渲染，则需要 state。 一种选择是在每次列表更改时重新添加侦听器：

const socketRef = useRef();
if (!socketRef.current) {
  socketRef.current = socketIOClient(ENDPOINT);
}
const [muteList, setMuteList] = useState([]);
useEffect(() => {
  const listener = (data) => {
    console.log(muteList);
    // do other stuff with muteList
  };
  socketRef.current.on('FromAPI', listener);
  // Remove this listener whenever the component unmounts
  // or whenever muteList changes
  return () => socketRef.current.off('FromAPI', listener);
}, [muteList];

您也可以同时使用 ref 和 state 来解决问题，但这不是一个非常优雅的方法。