React hooks：在监听器中获取 useState 的状态

IT技术 javascript reactjs react-hooks
2021-05-08 06:25:58

我的组件中有这个：

const [ pendingMessages, setPendingMessages ] = React.useState([]);

React.useEffect(function() {
    ref.current.addEventListener('send-message', onSendMessage);
    return function() {
      ref.current.removeEventListener('send-message', onSendMessage);
    };
  }, []);

function onSendMessage(event) {
  const newMessage = event.message;
  console.log('Here not up to date :(', pendingMessages);
  setPendingMessages([ ...pendingMessages, newMessage ]);
}

问题是它pendingMessages在侦听器中不是最新的，因为它不在渲染中。已经附上了。任何想法我该如何解决这个问题？

谢谢！

1个回答

问题在于效果运行时形成的收盘价。由于您将 设置useEffect为仅在初始安装时运行，因此它pendingMessages从声明时形成的闭包中获取 的值，因此即使pendingMessages更新，pendingMessagesinsideonSendMessage也将引用最初存在的相同值。

由于您不想访问中的值onSendMessage而只是根据先前的值更新状态，因此您可以简单地使用 setter 的回调模式

const [ pendingMessages, setPendingMessages ] = React.useState([]);

React.useEffect(function() {
    ref.current.addEventListener('send-message', onSendMessage);
    return function() {
      ref.current.removeEventListener('send-message', onSendMessage);
    };
  }, []);

function onSendMessage(event) {
  const newMessage = event.message;
  setPendingMessages(prevState =>([ ...prevState, newMessage ]));
}
其它你可能感兴趣的问题
上一篇如何端到端连接灯丝？ 下一篇Geeetech Prusa i3 挤出机似乎推动了更多的细丝、齿轮滑动/跳跃？