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

【问题标题】：Use current variable value within socket.on subscriber在 socket.on 订阅者中使用当前变量值
【发布时间】：2021-08-25 04:10:08
【问题描述】：

所以我有以下问题，我有一个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 }

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

【问题讨论】：

应该可以，我也是这样用的。您在哪里以及如何更改 modalOpened 的状态？
它在父上下文中被更改，如果我在函数之外记录 modalOpened，它具有准确的值，但它卡在 false 内部

标签： reactjs socket.io

【解决方案1】：

您应该将您的事件侦听器移动到 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]);

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

【讨论】：

是的，我昨晚就是这样做的，我找不到关闭插座并重新打开它们的方法，这很有效。

【解决方案2】：

啊啊啊，我知道我以前解决过这个问题！！！！您必须在 useEffect 中设置侦听器，否则在每次重新渲染时都会重新创建它。详情在这里：use socket.io event to update state

【讨论】：