Question

我正在开发一个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之前产生延迟。
有人可以帮我实现此功能吗？谢谢！

Answer 1

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

无法在React中先渲染一个子组件

1 个答案: