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

  • Z时代
  • 2024-01-10
  • 分类：问答

我的组件内部有这个：

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监听器内部不是最新的，因为它不在渲染器内部。它已经连接了。有什么想法我该如何解决？

谢谢！

回答：

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

由于您不想访问其中的值，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 ]));
}

以上是 React Hooks：在监听器中获取useState的状态 的全部内容， 来源链接： utcz.com/qa/435370.html

回到顶部