javascript - 在 react 中改变对象数组

Question

我正在尝试检查我的待办事项列表并更改状态，但我无法弄清楚哪里出了问题。

这是我的代码:

handleChange = (id) => {
    let data = [...this.state.data];
    let indexOfTodo = data.findIndex(todo => todo.id === id);
    data[indexOfTodo].checked = !data[indexOfTodo].checked;
    console.log(data[indexOfTodo]);
    console.log(data)
}

我按了两次按钮，这是 console.log

很抱歉这个虚拟问题。我是 React 新手

Answer 1

您不想改变 data[indexOfTodo] 对象，而是创建它的副本并更改 checked 属性。

您还必须使用 setState 将更新后的数组置于状态，以便您的组件重新呈现。您可以使用 setState 的函数版本，因为您的更新是从您的状态中的数据派生的。

handleChange = id => {
  this.setState(previousState => {
    let data = [...previousState.data];
    let indexOfTodo = data.findIndex(todo => todo.id === id);

    data[indexOfTodo] = {
      ...data[indexOfTodo],
      checked: !data[indexOfTodo].checked
    };

    return { data };
  });
};