Question

我正在研究React JS制作一个简单的待办事项列表，我的部分代码如下：

changeStatus(e, index) {
    this.state.tasks[index].status = e.target.value;
    this.setState((prevState) => ({
        tasks: prevState.tasks
    }));
}

正如React文档所说，我们不应该手动更改state，我们应该调用setState，所以，我在控制台上收到一条警告说，甚至调用setState手动更换后。

我这样做是因为，对我而言，这比分离task，在我的数组上执行splice并使用新值调用setState更实际。

我的方法有问题吗？您如何建议以有效和非重复的方式更新状态？

Answer 1

试试这个：

   changeStatus(e, index) {
      const tmp = { ...this.state };
      tmp.tasks[index].status = e.target.value;
      this.setState(tmp);
   }

Answer 2

你不应该直接改变状态，为了从状态创建一个新对象，然后更新它并将其设置回状态，如

changeStatus(e, index) {
    var tasks = {...this.state.tasks}
    tasks[index].status = e.target.value;
    this.setState({tasks});
}

如果您想知道{...this.state.tasks}做了什么，请查看以下答案：

What is the meaning of this syntax "{...x}" in Reactjs

但是，您也可以使用ES5 Object.assign（）运算符制作状态副本，例如

var tasks = Object.assign({}, this.state.tasks)

手动变换React状态，然后调用setState

2 个答案: