Question

问题：每当接收到新消息时执行侦听器功能时，我都希望将新消息（只是一个对象）添加到状态变量messages中。但是状态变量始终处于初始状态（即空列表），即使在第二条或第三条消息之后也是如此。

预期结果： 收到消息后，将调用connection.onstream，并使用messages将新消息添加到状态变量setMessages中。

const Messager = ( ) => {
  let [messages, setMessages] = useState([]);
  var connection = new ThirdPartyMessager();

  connection.onstream = function (event) { // when recieve a message, this will be called

    console.log(messages); // problem, this always shows initial state, i.e. []

    setMessages([ // thus setmessage will always have 1 item after adding new message
      ...messages,
      event.message
    ]);
  }
};

Answer 1

当您收听流时，connection.onstream中的

[]以connection.onstream开头，而setMessages在您呼叫messages ==> {{1 }}始终为[]，它是JS的闭包概念。您可以尝试解决此问题：

 setMessages(prevMessages = > ([...prevMessages,event.message]));

已更新：This is a good example from React docs关于在这种情况下设置事件setInterval的状态，但在您的情况下适用于事件onstream。

Answer 2

尝试使用效果

const Messager = () => {
  let [messages, setMessages] = useState([]);
  var connection = new ThirdPartyMessager();

  useEffect(() => {
    connection.onstream = function (event) {
      console.log(messages);
      setMessages([
        ...messages,
        event.message,
      ]);
    };
  }, []);
};

状态总是在第三方程序包的侦听器函数中显示初始值[反应]

2 个答案: