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

【问题标题】：React hooks: get state of useState inside a listenerReact hooks：在监听器中获取 useState 的状态
【发布时间】：2019-02-05 06:27:37
【问题描述】：

我的组件中有这个：

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 在侦听器内部不是最新的，因为它不在渲染内部。它已经附上了。有什么想法可以解决这个问题吗？

谢谢！

【问题讨论】：

标签： javascript reactjs react-hooks

【解决方案1】：

问题是由于运行效果时形成的关闭。由于您将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 ]));
}

【讨论】：