无法在 React 中呈现一个子组件之前的另一个子组件答案

【问题标题】：Unable to render one child component before another in React无法在 React 中呈现一个子组件之前的另一个子组件
【发布时间】：2019-11-25 14:28:03
【问题描述】：

我正在开发一个 React 应用程序，它在一个父组件下的不同组件中呈现两个大表。我一直在尝试在第二个表之前渲染第一个表，但我无法实现这一点。这是代码示例：

class Parent extends Component {
constructor(props) {
  super(props);

  this.state = ({
    loading: true,
    table1Data: [],
    table2Data: [],
    loadTable2: false
  })
}

componentDidMount() {
  axios.get('url').then ((response) => {
    this.setState({
      loading: false,
      table1Data: response.data.users,
      table2Data: response.data.activity
    })
  });
}

componentDidUpdate(prevProps, prevState) {
  if (prevState.loading != this.state.loading) {
    this.setState({ loadTable2: true });
  }
}

render() {
  if(this.state.loading) {
    return <Spinner />;
  }
  return (
    <div>
      <Table1 data={table1Data} />
      {this.state.loadTable2 && <Table2 data={table2Data} />}
    </div>
  )
}

}

<Table1/> 和 <Table2/> 都进行了一些计算。使用上面的代码，两个表一起呈现，在 Table1 呈现之前产生延迟。
有人可以帮我实现这个功能吗？谢谢！

【问题讨论】：

标签： javascript reactjs performance rendering conditional-rendering

【解决方案1】：

在 Table1 组件中实现 componentDidUpdate。将来自 Parent 的回调传递给 Table1。使用回调将状态设置为 loadTable2=true

【讨论】：

试过了，但仍然遇到同样的问题。