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

Question

假设我们尝试连接Web套接字。 Web 套接字服务器发送一些数据来获取表示联机或脱机的客户端状态。我尝试将这些数据存储到 redux 中(工作正常(，但我需要通过覆盖现有对象来立即更改这些状态。我需要一些功能来覆盖我的 redux 存储。我从下面的片段到此为止。

但：

此代码将对象推送到我的 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

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

使用数组：：查找索引

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]);
}
});

使用数组：：查找

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);
}, []);