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

Question

React 文档：

Never mutate this.state directly, as calling setState() afterwards may replace the mutation you made. Treat this.state as if it were immutable.

明白了。

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

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

不调用setState直接改变状态；或
改变它，然后使用 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,
});

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

为什么要这样：

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

因为传播你不会丢失 this.state.data 的内容 - 你基本上是将新响应推入 data 数组。

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

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

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

Updating state - why creating a new copy of state when calling setState?

immutability

reactjs