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

问题描述

反应文档:

很清楚.

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

我了解(如前面的示例所示)，我不仅应该:

I understand (as in previous example), that I should not either only:

1. 直接更改状态，而无需调用setState；或
2. 对其进行变异，然后再使用setState.

但是，为什么我不能(没有直接突变)调用setState 而没有创建新的状态副本(没有散布运算符/ Object.assign )?以下内容有什么问题?

However, why can't I just (without direct mutation) call setState without creating a new copy of state (no spread operator/Object.assign)? What would be wrong with the following:

  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 的内容替换为 response.data .

Absolutely nothing, unless you don't want to replace the contents of this.state.data with response.data.

为什么要这样:

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

由于传播，您不会丢失 this.state.data 的内容-您基本上是将新的响应推送到 data 数组中.

Because with spread you are not loosing the contents of this.state.data - you are basically pushing new response into the data array.

注意:您应该在 setState 内部使用回调，以从 this.state 访问当前的数据.

Note: You should use callback inside setState to get access to current data from this.state.

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

这篇关于更新状态-为什么在调用setState时创建新的状态副本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！