改变对象数组的反应

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

很抱歉出现虚假问题。我是新来的人

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

Answer 2

您的代码没有什么问题，但是要在需要调用setState方法的状态下反映该值。

您可以使用以下代码：

handleChange= (id) => {
    let a = this.state.data[id].checked;
    let todo = update(this.state.data, { [id]: { checked: { $set: !a } } })
    this.setState({ data: todo });
}; 

使用update功能。需要导入不可变的助手：

import update from 'immutability-helper';