render会刷新多次，需要将render里的数据传递给子组件数据不同步该怎么处理？

Question

在componentDidMount函数中有个调用后台接口方法，并把获取的数据设置到state中，当在render方法中输出this.state.data时，前两次会输出一个空，最后一次才会有后台的数据。如果此时需要把data传递给另一个子组件，会照成子组件里第一次获得的数据为[],如果该子组件要把data数据作为条件在组件渲染完成后（componentDidMount）去请求后台接口，此时获取的数据就不正确了。
请问下这种常见情况该如何避免？或者通过接口初始化数据应该放到哪里？放到constructor函数里又存在异步问题。。。

componentDidMount() {

    this.fetch();

}

fetch = (params = {}) => {
    console.log('params:', params);
    this.setState({ loading: true });
    reqwest({
      url: 'https://randomuser.me/api',
      method: 'get',
      data: {
        results: 10,
        ...params,
      },
      type: 'json',
    }).then(data => {
      const pagination = { ...this.state.pagination };
      // Read total count from server
      // pagination.total = data.totalCount;
      pagination.total = 200;
      this.setState({
        loading: false,
        data: data.results,
        pagination,
      });
    });
  };


render() {

    console.log(this.state.data);



    return (

        <Table

            columns={columns}

            rowKey={record =>  record.login.uuid}

            dataSource={this.state.data}

            pagination={this.state.pagination}

            loading={this.state.loading}

            onChange={this.handleTableChange}

        />

    );

}

Answer 1

一般在子组件用hookcomponentWillReceiveProps判断父组件传递的上一次的props和旧的props是否相等，如果不相等再执行子组件方法