React.js 组件生命周期、状态行为和 JavaScript 的异步特性

我对预期结果和实际结果有疑问。尽管fetchData() and fetchnumberOfCommits()方法是从componentWillMount()数组仍然没有数据。但最后，render 方法被调用两次，其中数组从 API 获取了数据。 我打电话给setState()方法在上述两个方法中都调用了 render 方法。 我的问题是为什么调用这两个方法后数组没有立即获取数据？数组在什么时候获取数据？

代码示例 https://github.com/94ju/ComponentCheck

首次安装组件时会调用 render 方法，收到数据且状态发生更改时会再次调用 render 方法。这就是为什么您会看到渲染方法被调用两次的原因。

componentWillMount()在 React 16.3 中已弃用。你应该使用componentDidMount()用于获取数据，您应该期望您的组件在获取数据之前至少会渲染一次，因此您需要渲染null或获取数据之前的加载状态。我提供了一个示例，说明如何检查它是否已正确加载并显示加载消息。

class App extends React.Component {

  constructor() {
    super();
    this.state = {
      check: true,
      repositories: [],
      commits: [],
    };
  }

  componentDidMount() {
    this.fetchData();
    this.fetchNumberOfCommits();
  }

  fetchData() { /*...*/ }
  fetchNumberOfCommits() { /*...*/ }

  isLoaded() {
    return this.state.respositories.length > 0;
  }

  render() {
    const { repositories } = this.state;

    if(isLoaded) {
      return repositories.map(repo => {
        return (
          <Api
            repo={repo.name}
            createdDay={repo.createdDay} 
          />
        );
      });
    }

    return <h1>Loading repos...</h1>;
  }
}