更新状态 - 为什么在调用 setState 时创建新的状态副本？

Question

反应文档：

永远不要直接改变this.state，因为之后调用setState() 可能会替换您所做的突变。像对待this.state 一样对待 不可变。

这很清楚。

class App extends React.Component {
  state = {
   data: []
  } 

以下我理解

  updateState(event) {
   const {name, value} = event.target;
   let user = this.state.user; // this is a reference, not a copy...
   user[name] = value; // 
   return this.setState({user}); // so this could replace the previous mutation
  }

下面这个我看不懂

  updateState(event) {
  const {name, value} = event.target;
  let user = {...this.state.user, [name]: value};
  this.setState({user});
  }

我明白（如前面的例子），我不应该只是：

1. 不调用setState直接改变状态；或
2. 对其进行变异，然后使用 setState。

但是，为什么我不能（没有直接突变）调用 setState 而不创建一个新的状态副本（没有传播运算符/Object.assign）？以下会有什么问题：

  getData = () => {
   axios.get("example.com") ...
    this.setState({
     data:response.data
    })
  } 

为什么会这样：

  getData = () => {
   axios.get("example.com") ...
    this.setState({
     data:[...data, response.data]
    })
  } 

 render (){ 
  ...
 }  
}

Answer 1

以下会有什么问题：

this.setState({
   data: response.data,
});

绝对没有，除非您不想将this.state.data 的内容替换为response.data。

为什么会这样：

this.setState({
   data: [...data, response.data],
});

因为通过传播，您不会丢失 this.state.data 的内容 - 您基本上是在将新响应推送到 data 数组中。

注意：您应该在setState 中使用回调来从this.state 访问当前的data。

this.setState((prevState) => ({
   data: [...prevState.data, response.data],
}));