在socket.io事件中反应useState不更新

Question

我正在尝试在 socket.io 事件中更新我的状态， 但只反映最近的变化，之前的变化消失了

  const [connStatus, setStatus] = useState({});
  const newConn = (user_id) => {
    console.log("previous ", connStatus);
    console.log("new status ", { ...connStatus, [user_id]: true });
    setStatus({ ...connStatus, [user_id]: true });
  };

我正在使用这个函数newConn来更新值，

    props.socket.on("ANSWER", (incoming) => {
     
      const desc = new RTCSessionDescription(incoming.sdp);

      peers.current[incoming.caller]
        .setRemoteDescription(desc)
        .then((data) => {
          // set conn as true
          console.log(connStatus, { ...connStatus, [incoming.caller]: true });
          newConn(incoming.caller);
        })
        .catch((e) => console.log(e));
    });

之前的状态总是被记录为空{}，即它的初始值，新的状态正在更新但丢弃所有之前的值。

对于

newConn("key1"); newConn("key2");

日志看起来像这样

previous {}
new status {"key1" : true}

previous {}
new status {"key2" : true}

使用类似的函数签名

  const newConn = (user_id) => {
    setStatus((prevState) => {
      console.log("previous ", prevState);
      console.log("new status ", { ...prevState, [user_id]: true });
      return { ...connStatus, [user_id]: true };
    });
  };

对于

newConn("key1"); newConn("key2"); newConn("key3");

日志看起来像这样

previous {}
new status {"key1" : true}

previous {"key1" : true}
new status {"key1" : true,"key2" : true}

previous {"key2" : true}
new status {"key2" : true,"key3" : true}

更新

我找到了解决方案，但不确定它为什么有效，我之前的尝试没有

  const newConn = (user_id) => {
    setStatus((prevState) => {
      console.log("previous ", prevState);
      console.log("new status ", { ...prevState, [user_id]: true });
      const newState = { ...prevState, [user_id]: true };

      return newState;
    });
  };

使用newConn 可以得到所需的输出。

Answer 1

使用setStatus的函数签名：

const [connStatus, setStatus] = useState({});
const newConn = (user_id) => {
    console.log("previous ", connStatus);
    console.log("new status ", { ...connStatus, [user_id]: true });
    setStatus(s => ({ ...s.connStatus, [user_id]: true }));
           // ^ HERE
  };