useState 未使用 socket.io 正确更新

Question

我正在通过 socket.io 提取数据，但是当侦听来自服务器的传入消息时，我的状态未正确更新。

我可以看到数据正在从套接字中正确提取（每秒 50 个请求），但setQuotes 只是用从服务器返回的新项目替换现有项目（因此我的状态的长度始终为 1）。

  const [quotes, setQuotes] = useState([])
 const subscribe = () => {
    let getQuote = 'quote.subscribe';
    socket.emit(getQuote, {});
    socket.on('listenAction', function (msg) {
        setQuotes([...quotes, msg]) // This just replace the entire state instead of adding items to the existing array
    }); 
}

Subscribe // 打开网络套接字流

Answer 1

您需要将侦听器移到订阅函数之外。由于它是一个副作用，因此您应该将其包装在其中。React.useEffect 使用函数 setstate 读取先前的值也是一个好主意。

React.useEffect(() => {
    socket.on('listenAction', function (msg) {
        setQuotes((quotes) => [...quotes, msg])
    }); 
}, []);