Question

我正在尝试在 socket on 内获取更新的 react hooks 值，但没有获取更新的值。每当我更新我的 react 钩子值时，它都不会反映在套接字内部。下面是我的代码

//socketIO in client 

useEffect(() => {

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

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


  }, []);

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

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];

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

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

1 个答案: