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

我了解（如前面的示例所示），我不仅应该：

直接更改状态，而无需调用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,
});

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

为什么要这样：

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

由于传播，您并没有失去this.state.data的内容-您基本上是将新的响应推送到data数组中。

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

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

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

1 个答案: