如何通过 API 调用更新状态？

Question

我对我的服务器进行了调用，该服务器期望从该调用返回一个对象。

constructor(props) {
super(props);
this.state ={todos: []};
}
componentDidMount() {
 console.log("HELLO");
 axios.get("http://localhost:4000/todos")
.then(response =>{
  console.log(response.data); // this works
  this.setState({todos: response.data});
  })
 console.log(this.state.todos); // this does not (why?)
 }

Answer 1

this.setState({todos: response.data}) 不同步。 console.log(this.state.todos) 可以在 setState 之前执行

来自react文档：

setState() 并不总是立即更新组件。它可能会批量更新或将更新推迟到以后。这使得在调用setState() 之后阅读this.state right 成为一个潜在的陷阱。相反，请使用 componentDidUpdate 或 setState 回调 (setState(updater, callback))，保证在应用更新后触发其中任何一个。

如果您需要根据之前的状态设置状态，请阅读下面的 updater 参数。

this.setState({todos: response.data},function () {
     console.log(this.state.todos);
});

阅读本文了解更多详情：https://reactjs.org/docs/react-component.html#setstate