[英]How to modify array within object in react component state
I have the following state in my app:我的应用程序中有以下状态:
const [activeChats, setActiveChats] = useState([
{
id: 1,
name: 'Luciana Gutierrez',
role: 'HR Manager',
avatar: avatar2,
messages: [
{
content: 'Hola Luciana! Tuviste alguna novedad?',
received: false,
date: '9:45 AM'
},
{
content: 'Hola John! Todavía no...',
received: true,
date: '10:19 AM'
},
{
content: 'Si tengo alguna otra novedad te comento. Gracias!',
received: true,
date: '10:20 AM'
}
]
},
{
id: 2,
name: 'Micaela Alvarez',
role: 'Marketing Manager',
avatar: avatar1,
messages: [
{
content: 'Hola John! Entre qué horarios podrías hoy tener la meeting?',
received: true,
date: '9:45 AM'
},
{
content: 'Hola Micaela! Muy bien. Yo puedo de 10 a 17 hs.',
received: false,
date: '10:05 AM'
},
{
content: 'Dale, agendé la meeting para hoy a las 14hs.',
received: true,
date: '10:15 AM'
}
]
},
{
id: 3,
name: 'Manuel Hoffman',
role: 'Business Manager',
avatar: avatar3,
messages: [
{
content: 'Gracias por la reunión de ayer, Manu, fue muy productiva!',
received: false,
date: '9:35 AM'
},
{
content: 'Gracias a vos!',
received: true,
date: '9:37 AM'
}
]
}
])
And I want to modify it only by adding more items within the messages key of each object, leaving the rest of the state just as it was.而且我只想通过在每个对象的消息键中添加更多项目来修改它,而保持状态的其余部分保持原样。
For example, lets say I add two new messages to the first object.例如,假设我向第一个对象添加了两条新消息。 The state should look like this:状态应该是这样的:
const [activeChats, setActiveChats] = useState([
{
id: 1,
name: 'Luciana Gutierrez',
role: 'HR Manager',
avatar: avatar2,
messages: [
{
content: 'Hola Luciana! Tuviste alguna novedad?',
received: false,
date: '9:45 AM'
},
{
content: 'Hola John! Todavía no...',
received: true,
date: '10:19 AM'
},
{
content: 'Si tengo alguna otra novedad te comento. Gracias!',
received: true,
date: '10:20 AM'
},
{
content: 'Example1',
received: true,
date: '10:21 AM'
},
{
content: 'Example2',
received: true,
date: '10:22 AM'
}
]
},
{
id: 2,
name: 'Micaela Alvarez',
role: 'Marketing Manager',
avatar: avatar1,
messages: [
{
content: 'Hola John! Entre qué horarios podrías hoy tener la meeting?',
received: true,
date: '9:45 AM'
},
{
content: 'Hola Micaela! Muy bien. Yo puedo de 10 a 17 hs.',
received: false,
date: '10:05 AM'
},
{
content: 'Dale, agendé la meeting para hoy a las 14hs.',
received: true,
date: '10:15 AM'
}
]
},
{
id: 3,
name: 'Manuel Hoffman',
role: 'Business Manager',
avatar: avatar3,
messages: [
{
content: 'Gracias por la reunión de ayer, Manu, fue muy productiva!',
received: false,
date: '9:35 AM'
},
{
content: 'Gracias a vos!',
received: true,
date: '9:37 AM'
}
]
}
])
How can I do this?我怎样才能做到这一点? Im thinking about the spread operator but I'm not sure how to use it with the nesting I have.我正在考虑扩展运算符,但我不确定如何将它与我拥有的嵌套一起使用。
You need to return a new array for setActiveStates
being particularly careful not to mutate the nested object that you are updating.您需要为setActiveStates
返回一个新数组,特别注意不要改变您正在更新的嵌套对象。 A long hand approach is to findIndex()
of the item you want to update, then use this index to spread slice()
s of the array before and after the item in question, and also retrieve and clone the item itself and any nested object properties to return a copy.一个长期的方法是findIndex()
要更新的项目,然后使用此索引在相关项目之前和之后扩展数组的slice()
s,并检索和克隆项目本身和任何嵌套对象属性返回副本。
const newMessages = [{ content: 'new1', received: true, date: '10:21 AM' }, { content: 'new2', received: true, date: '10:22 AM' }];
const itemId = 1;
setActiveChats(prevState => {
const index = prevState.findIndex(({ id }) => id = itemId);
const item = prevState[index];
return [
...prevState.slice(0, index),
{ ...item, messages: [...item.messages, ...newMessages] },
...prevState.slice(index + 1)
];
});
It's a little bit tedious to do this with nested structures but something like this should work:使用嵌套结构执行此操作有点乏味,但应该可以:
setActiveChats(
activeChats.map((activeChat, idx) => {
// Add to the first entry
if (idx === 0) {
return {
...activeChat,
// assumes `newMessages` is an array of new messages
messages: [...activeChat.messages, ...newMessages]
};
}
return activeChat;
})
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.