Javascript 如何更新处于组件状态的对象数组？

我试图更新存储在数组中的对象的属性

我的状态是这样的：

state = {
  todos: [
    {
     id: '1',
     title: 'first item,
     completed: false
    },
    {
     id: '2',
     title: 'second item,
     completed: false
    }
  ],
}

onUpdate = (id) => {
  const { todos } = this.state;
  let i = todos.findIndex(todo => todo.id === id);
  let status = todos[i].completed
  let updatedTodo = {
    ...todos[i],
    completed: !status
  }
  this.setState({
    todos: [
      ...todos.slice(0, i),
      updatedTodo,
      ...todos.slice(i + 1)
    ]
  });
}

我试图做的是访问“todos”数组中的第二个元素，并将完成的属性更新为false->true或true->false

我有一个用于更新的处理程序按钮，用于更新的类方法如下所示：

state = {
  todos: [
    {
     id: '1',
     title: 'first item,
     completed: false
    },
    {
     id: '2',
     title: 'second item,
     completed: false
    }
  ],
}

onUpdate = (id) => {
  const { todos } = this.state;
  let i = todos.findIndex(todo => todo.id === id);
  let status = todos[i].completed
  let updatedTodo = {
    ...todos[i],
    completed: !status
  }
  this.setState({
    todos: [
      ...todos.slice(0, i),
      updatedTodo,
      ...todos.slice(i + 1)
    ]
  });
}

---

虽然这确实有效，但我想知道是否有更简洁的方法可以达到同样的效果；我尝试使用Object.assign（），但没有成功，因为我的“TODO”是数组，而不是对象。请用更好的代码来启发我

您只需从

状态

复制您的

待办事项

，然后进行编辑，然后将其放回

状态

onUpdate = (id) => {
    var todos = [...this.state.todos]
    var target = todos.find(todo => todo.id == id)
    if (target) {
        target.completed = !target.completed
        this.setState({ todos })
    }
}

---

您只需从

状态

复制您的

待办事项

，然后进行编辑，然后将其放回

状态

onUpdate = (id) => {
    var todos = [...this.state.todos]
    var target = todos.find(todo => todo.id == id)
    if (target) {
        target.completed = !target.completed
        this.setState({ todos })
    }
}

最好使用以下方法确保您不会处理过时的数据：

onUpdate = (id) => {
  this.setState(prevState => {
    const copy = [...prevState.todos];
    const index = copy.findIndex(t => t.id === id);
    copy[index].completed = !copy[index].completed;

    return { todos: copy }
  })  
}

最好使用以下方法确保您不会处理过时的数据：

onUpdate = (id) => {
  this.setState(prevState => {
    const copy = [...prevState.todos];
    const index = copy.findIndex(t => t.id === id);
    copy[index].completed = !copy[index].completed;

    return { todos: copy }
  })  
}

---

刚试过这个，效果很好！谢谢你。刚刚试过这个，效果很好！非常感谢。