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()并不总是立即更新组件。它可能会批量更新或将更新推迟到以后。这使得在调用this.state right之后阅读setState()成为潜在的陷阱。相反，请使用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

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

1 个答案: