推入数组时覆盖现有对象 - 替换或添加

Question

假设我们尝试连接 web socket。 web socket服务器发送一些数据来获取代表在线或离线的客户端状态。我试图将这些数据存储到 redux 中（工作正常），但我需要通过覆盖现有对象来立即更改这些状态​​。我需要一些功能来覆盖我的 redux 商店。到目前为止，我使用下面的 sn-p。

但是：

此代码将对象推送到我的 redux 商店而不是覆盖

  const [status, set_status] = useState([]);

  useEffect(() => {
    const socket = io(ws_api, {
      query: `token=${localStorage.getItem("token")}`,
    });

    socket.on("message", (data) => {

      status.map((item) => {
        if (item.application === data.application) {
          item["status"] = data.status;
        } else {
          set_status((status) => [...status, data]);
        }
      });

    });
  }, []);

  useEffect(() => {
    get_client_status(status); // redux action
  }, [status]);

来自消息套接字的数据结构

{
  application: "5ede25f4d3fde1c8a70f0a38"
  client: "5ede25f4d3fde1c8a70f0a36"
  status: "offline"
}

Answer 1

首先搜索任何现有数据元素的当前状态，如果找到则更新它，否则添加到数组中。

使用array::findIndex

const messageHandler = data => {
  const dataIndex = status.findIndex(
    item => item.application === data.application
  );

  if (dataIndex !== -1) {
    set_status(status =>
      status.map(item => {
        return item.application === data.application
          ? { ...item, status: data.status }
          : item;
      })
    );
  } else {
    set_status(status => [...status, data]);
  }
});

使用array::find

const messageHandler = data => {
  const found = status.find(item => item.application === data.application);

  if (found) {
    set_status(status =>
      status.map(item => {
        return item.application === data.application
          ? { ...item, status: data.status }
          : item;
      })
    );
  } else {
    set_status(status => [...status, data]);
  }
});

编辑：在效果之外定义这个回调

useEffect(() => {
  socket.on("message", messageHandler);
}, []);