reactjs - 将对象替换为 React 状态下的另一个对象

Question

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

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)
    ]
}