使用socket.io时,useState不能正确更新

我正在通过socket.io拉取数据,但是当监听来自服务器的传入消息时,我的状态没有正确更新。

我可以看到数据被正确地从socket中拉出(每秒50个请求对等),但是 setQuotes 只是用服务器返回的新项目替换现有项目(所以我的状态总是有一个长度)。

  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函数之外.由于它是一个sideEffect,你应该把它包在 React.useEffect使用functional setstate来读取以前的值也是个好主意。

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

给TA打赏
共{{data.count}}人
人已打赏
未分类

AWS cloudwatch webhook 或 api

2022-9-22 21:05:26

未分类

验证二次方程是否有根的程序。

2022-9-22 21:16:16

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索