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

反应文档：

永不变异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。

但是，为什么我不能（不直接突变）调用 setStatewithout创建一个新的状态副本（无扩展运算符/Object.assign）？以下情况会出现什么问题：

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

为什么应该是：

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

 render (){ 
  ...
 }  
}

以下情况会出现什么问题：

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

绝对没有，除非你不想替换其中的内容this.state.data with response.data.

为什么应该是：

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

因为随着传播，你不会丢失其中的内容this.state.data- 你基本上是在推动新的反应data array.

Note: 你应该在里面使用回调setState访问当前的data from this.state.

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