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

Question

我对预期结果和实际结果有疑问。即使从 componentWillMount() 调用了 fetchData() 和 fetchnumberOfCommits() 方法，数组仍然没有数据。但最后，render 方法被调用了两次，其中数组已经从 API 获取了数据。我在上面提到的两个调用渲染方法的方法中都调用了 setState() 方法。我的问题是为什么调用这两个方法后数组没有立即获取数据？数组在什么时候获取数据？

Code example

Answer 1

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>;
  }
}