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

这是我的减速机

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'）

更像它。

我使用这个npm包来解决这个问题。它是一个非常有用的工具，有助于减少样板代码。

map（）

方法和扩展语法可以帮助您实现所需的结果

使用

map（），更新当前对象的
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) { .. }