手动改变 React 上的状态，然后调用 setState

Question

I'm studying React JS making a simple todo list and part of my code is as follows:

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

As React documentation says, we shouldn't change state manually, we should call setState instead, so, I'm receiving a warning on console saying that, even calling setState after the manual changing.

I'm doing so because, for me, is more practical doing that than separating the task , doing a splice on my array, and calling setState with the new values.

Is there a problem with my approach? How would you recommend updating state in a efficient and non-repetitive way?

Answer 1

Try this :

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

Answer 2

You should not mutate the state directly, to do that create a new object from the state and then update that and set it back to state like

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

In case you are wondering as to what {...this.state.tasks} do then check this answer:

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

However you can also make a copy of the state using the ES5 Object.assign() operator like

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