Javascript 推入阵列时替代现有对象-替换或添加
假设我们尝试连接web套接字。web套接字服务器发送一些数据以获取表示联机或脱机状态的客户端状态。我试图将这些数据存储到redux中(工作正常),但我需要立即更改这些状态,覆盖现有对象。我需要一些覆盖我的redux存储的功能。到目前为止,我只听了下面的片段 但是: 此代码将对象推送到我的redux存储区,而不覆盖 来自消息上套接字的数据结构Javascript 推入阵列时替代现有对象-替换或添加,javascript,reactjs,react-hooks,react-lifecycle,Javascript,Reactjs,React Hooks,React Lifecycle,假设我们尝试连接web套接字。web套接字服务器发送一些数据以获取表示联机或脱机状态的客户端状态。我试图将这些数据存储到redux中(工作正常),但我需要立即更改这些状态,覆盖现有对象。我需要一些覆盖我的redux存储的功能。到目前为止,我只听了下面的片段 但是: 此代码将对象推送到我的redux存储区,而不覆盖 来自消息上套接字的数据结构 { application: "5ede25f4d3fde1c8a70f0a38" client: "5ede25f4d3fde1c8a70f0a3
{
application: "5ede25f4d3fde1c8a70f0a38"
client: "5ede25f4d3fde1c8a70f0a36"
status: "offline"
}
首先搜索任何现有数据元素的当前状态,如果找到,则更新它,否则添加到数组中 使用 使用 编辑:在效果外部定义此回调
useEffect(() => {
socket.on("message", messageHandler);
}, []);
是否要在
onMessage
回调中更新或添加消息?例如,查看并修复共享的代码?您是否考虑过更改为使用对象或映射来表示您的状态而不是数组?因为每次消息返回时,此代码块都在使用效果(componentDidMount)内-1我不知道它将如何修复啊是的,onMessage
回调包含在范围内,以及安装时的状态值。尝试在效果外部定义数据处理程序回调。我将更新答案。效果之外的数据处理程序回调只需将对象推入数组而不覆盖:(@MA2WEB你知道吗,重新阅读你的问题我发现如果你发送要存储在那里的消息并将它们保持在本地组件状态,你是说你的redux存储中的数据没有被覆盖吗?我认为解决方法是onMessage
将消息以动作发送到reducer进行更新你的状态。逻辑基本相同,你会更新你的单一真相来源。
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);
}, []);