为什么我对状态的更改不会显示在我的 componentDidMount 生命周期中？

Question

我正在使用 React 构建一个应用程序，对于我的主页，我在 componentDidMount 生命周期中设置状态：

export default class HomePage extends Component {
  state = {
    posts: [],
    token: '',
  };

  //Display posts when homepage renders
  componentDidMount() {
    //If token exists, run lifecycle event
    if (this.props.location.state.token) {
      this.setState({ token: this.props.location.state.token });
    }
    Axios.get('http://localhost:3000/api/posts/all')
      .then((req) => {
        this.setState({ posts: req.data });
      })
      .catch((err) => {
        console.log(err.message);
        throw err;
      });
    console.log(this.state);
  }

然而，当我在生命周期方法结束时运行控制台日志时，它显示帖子和令牌仍然是空的。我知道它们正在被填充，因为来自 req.data 的帖子出现在我的 JSX 中。为什么我在方法中控制台登录时显示状态为空？

Answer 1

React setState 是异步的！

React 不保证立即应用状态更改。
setState() 并不总是立即更新组件。
将 setState() 视为请求而不是更新组件的即时命令。

this.setState((previousState, currentProps) => {
    return { ...previousState, foo: currentProps.bar };
});

为什么我对状态的更改不会显示在我的 componentDidMount 生命周期中？

Why won't my changes to state show in my componentDidMount lifecycle?

reactjs

react-lifecycle