Question

我对我的React应用程序中生命周期阶段的顺序感到困惑。我有以下课程：

constructor(props) {
  super(props);

  this.state = {
    skip: 0
  }

}

fetchMoreArticles() {
  this.props.dispatch(fetchArticles(this.state.skip))
  this.setState({skip: (this.state.skip + 5)})
  console.log(this.state.skip); //This outputs 0 on page refresh???
}

componentDidMount() {
  this.fetchMoreArticles()
}

当我写入控制台时（请参阅fetchMoreArticles()）我希望输出为5，但它是0.有人可以解释原因吗？

注意： fetchArticles()是使用Redux的ajax调用

Answer 1

setState是异步的。所以你必须使用回调：

this.setState({skip: (this.state.skip + 5)}, () => {
    console.log(this.state.skip);
})

试图了解React的生命周期阶段

1 个答案: