Как обновить массив объектов в состоянии компонента?

Question

Я пытаюсь обновить свойство объекта, который хранится в массиве.

мое состояние выглядит примерно так:

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

То, что я пытаюсь сделать, это доступвторой элемент в массиве 'todos' и обновите завершенное свойство на false -> true или true -> 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 (), но это не сработало, потому что мои «задачи» - это массив, а не объект.Пожалуйста, просветите меня лучшим кодом!

Answer 1

Лучше всего использовать функцию обновления , чтобы убедиться, что вы не работаете с устаревшими данными:

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

Answer 2

Вы можете просто скопировать todos из state, затем внести изменения, а затем вернуть его в state

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