1

我正在构建一个以 reoiljs 作为状态管理器的反应应用程序，我需要从 Web 套接字获取数据并相应地更新状态。我不使用常规数组的原因是我需要在我的组件之间共享状态。

详细地说，该组件有一个 WebSocket 连接，并将有数据流式传输到其中。然后它需要通过推送接收到的数据来更新数组。问题是由于组件生命周期或其他原因，状态写入不正确，这就是我认为发生的情况

  1. 收到响应 1 并调用 setState([...state, data])
  2. 然后收到响应 2 并调用 setState([...state, data])
  3. 状态实际上是由响应 1 设置的
  4. 状态由响应 2 设置

问题是当响应 2 进入并调用 setState 时，它​​具有不包括响应 1 的旧版本状态。

我似乎无法弄清楚如何解决这个问题。这是精简的代码。

import {atom} from "recoil"
import {useRecoilState} from "recoil"
const WebSocket = require("isomorphic-ws");

const statusAtom = atom<string[]>({
    key: "statusAtom",
    default: []
});


function Component() {
    const [status, setStatus] = useRecoilState(statusAtom);

    const functionCalledAfterButtonPress = () => {
        ws.onmessage = function incoming(res: any) {
            console.log(res.data); // for debugging
            
            setStatus([...status, res.data]);
        };
    }
}

请注意，我不包括其他事件，例如ws.onopen和 return 语句或诸如此类的东西，并且原子声明和组件声明位于不同的文件中。

4

1 回答 1

1

正如 Jayce444 所说，解决这个问题的方法不是使用setStatus已经计算的值，[...status, res.data]而是传递一个在状态更新时调用的 lambda 语句。

代替： setStatus([..status, res.data])

采用：setStatus(prevStatus => [...prevStatus, res.data])

于 2021-04-29T02:22:46.133 回答