在 socket.on 个订阅者中使用当前变量值

Question

所以我有以下问题，我有一个 socket.on("someevent", someFunction)，我的问题是 someFunction 中的代码应该只在特定条件下执行，所以：

const [modalOpened, setModalOpened] = useState(false);

const [data, setData] = useState([]);

const handleSetData = (data) => {
  !modalOpened && setData(data);
}

socket.on("someevent", (data) => {
  handleSetData(data);
});

问题是，一旦创建了该事件侦听器，它就会接受 modalOpened 的当前值并坚持下去，我希望它始终使用当前的实际值，所以如何我应该通过引用传递它吗？

我已经尝试创建另一个函数，但它仍然无法使用它：

const checkModalOpened = () => { return modalOpened }

它仍然坚持它捕获的任何值。

Answer 1

Aaaa，我知道我以前解决过这个问题！！！！您必须在 useEffect 中设置监听器，否则它会在每次重新渲染时重新创建。详情在这里：

Answer 2

您应该将事件侦听器移动到 useEffect 函数中。

useEffect(() => {
  const listener = (data) => {
    if (!modalOpened) {
      setData(data);
    }
  };
  socket.on("someevent", listener);
  // You also want to remove the event listener
  // when the component unmounts
  return () => {
    socket.off("someevent", listener);
    // this will prevent any leak from your component
  };
}, [modalOpened]);

这将确保在组件挂载时绑定监听器并且

在 socket.on 个订阅者中使用当前变量值

Use current variable value within socket.on subscriber

socket.io

reactjs