更新另一个数组中对象内部的数组

Question

这是我的还原剂

let initialState = [
{ name: 'john', messages: [{ message: "hi" }] },
{ name: 'max', messages: [{ message: "howdy" }] },
{ name: 'alex', messages: [{ message: "hello" }] },
...
];
const Messages = (state = [], action) => {
switch (action.type) {
case "MESSAGES":
return [...state, ...action.payload];
case "UPDATE_ALEX_MESSAGES":
// HOW TO UPDATE????
default:
return state;
}
};
export default Messages;

如何更新alex的消息并向其推送另一个对象？(以上代码的注释部分(

注意：亚历克斯的位置不稳定，可能会改变。所以像state[2]这样的东西不是我想要的。更像state.find(x => x.name === 'alex')的东西更像它。

Answer 1

map()方法和spread语法可以帮助您获得所需的结果。

使用map()方法，遍历状态数组并在回调函数内部，检查当前用户对象的name是否为"0"；alex"；，如果是，则更新当前对象的messages属性，方法是为其分配一个新数组，并使用排列语法复制现有消息，然后在数组中添加新消息。

case "UPDATE_ALEX_MESSAGES":
return state.map((user) => {
if (name === "alex") {
user.messages = [...user.messages, newMessage];
}
return user;
});

您还可以通过在if块内返回一个新对象来避免更改现有对象。

case "UPDATE_ALEX_MESSAGES":
return state.map((user) => {
if (name === "alex") {
return { ...user, messages: [...user.messages, newMessage] };
}
return user;
});

理想情况下，您将在操作的有效负载中传递用户的名称，因此以下条件为

if (name === "alex") { .. }

将成为

if (name === action.payload) { .. }

Answer 2

我使用这个npm包来解决这个问题https://www.npmjs.com/package/immer.这是一个非常有用的工具，有助于减少样板代码