reactjs - 将流式值设置为 React 状态

Question

目前我有一个示例应用程序，我尝试在其中使用 RethinkDB 和 React。

在 RethinkDB 中，他们有changefeed监听订阅表中的更改（插入、更新、删除）。

当调用“feed”套接字事件时，它会将新创建的记录附加到状态。执行更新时，我想修改当前状态用户，但是当我尝试记录值时，它仍然是空数组，但我想根据套接字事件响应返回的 id 修改特定记录。

例子：

假设调用users后 state的当前值：socket.emit('load')

{id: "0e6dde2c-b21b-4963-9a06-393b04dfeb45", name: "updaste."} App.js:28 
{id: "106682b4-1395-4f8a-9758-5dd1d73b4174", name: "test1xx"} App.js:28 
{id: "60b7c8cf-b40f-4209-a7ef-ff51735ae7c5", name: "William Adama", posts: Array(3), tv_show: "Battlestar Galactica"} App.js:28 
{id: "ff920ad9-fc1d-4034-a7e8-d96b502935d3", name: "tesst"} App.js:28 

现在在后端我更新了记录：ff920ad9-fc1d-4034-a7e8-d96b502935d3，socket.on('feed')将返回

{id: "ff920ad9-fc1d-4034-a7e8-d96b502935d3", name: "updated"}

我想更新users状态中的数组元素，所以我这样做了。

ws.on("feed", response => {
      console.log(response);
      const prevUser = [...users]
      let result = prevUser.find(t => t.id === response.id) 
      if (result) {
        result.name = response.name
      }
      setUsers(user => [...user, response]);
});

它返回[]forusers和undefinedfor result。我没有费心将它附加result到 setUsers ，因为它无论如何都是未定义的。

完整片段：

const [users, setUsers] = useState([]);

useEffect(() => {
  ws.on("connect", () => {
    console.log("connected");
    ws.emit("load"); // server will emit the "feed" message
    console.log(`emitted`);
  });

  // will be called when "load" message was emitted
  ws.on("feed", response => {
    console.log(response);
    const prevUser = [...users];
    let result = prevUser.find(t => t.id === response.id);
    if (result) {
      result.name = response.name;
    }
    console.log(result);

    setUsers(user => [...user, response]);
  });
});

该response对象是流值。

请帮我。谢谢

标签： reactjsrethinkdb