Question

我有一个对象数组。我找到了需要替换的对象，但无法在状态下替换它。原始对象保持不变，而我要替换的对象被添加到数组的末尾。我正在使用React钩子。谢谢

case types.ADD_USERNAME: 
  let task = action.payload
  let assignedTask = state.tasks.find(el => el.id === task.id)
  let index = state.tasks.indexOf(assignedTask)

  return {
    ...state, 
    tasks: [
      ...state.tasks,
      assignedTask = {
        ...assignedTask,
        user: task.user.name
      }
    ]
}

Answer 1

您可以使用map而不是通过索引来查找元素来更新状态，我认为这是一种更清洁的方法

case types.ADD_USERNAME: 
  let task = action.payload;

  return {
    ...state, 
    tasks: state.tasks.map(el => {
        if(el.id == task.id) {
           return { ...el, user: task.user.name} 
        }
        return el;
    });
}

但是，如果您希望通过索引查找元素方法，则需要对任务数组进行切片并更新特定的索引元素

case types.ADD_USERNAME: 
  let task = action.payload
  let index= state.tasks.findIndex(el => el.id === task.id);

  return {
    ...state, 
    tasks: [
      ...state.tasks.slice(0, index - 1),
      {
        ...state.tasks[index],
        user: task.user.name
      }
      ...state.tasks.slice(index + 1)
    ]
}

Answer 2

您可以通过使用地图并通过id或任何其他唯一标识符匹配对象来实现此目的：

case types.ADD_USERNAME:
  let task = action.payload;

  return {
    ...state,
    tasks: state.tasks.map(t => {
      if (t.id === task.id) {
        return {
          ...t,
          user: task.user.name
        };
      }
      return t;
    })
  };

在状态React中将对象替换为另一个对象

2 个答案: