Question

我是新来的人，所以也许这是一个简单的问题。

我有两个正在调用数据库的组件-CallsCharts和CallsList。我想首先呈现CallsCharts，完成后我想查询数据库以获取CallsList。我怎样才能做到这一点？当我这样离开时，CallsList总是最先加载。

我可以以某种方式选择优先级吗？

render() {
    return (
        <div className="container-fluid">
            <CallsCharts/>
            <CallsList/>
        </div>
    );
}

Answer 1

您可以编写它们。 CallsList可以是CallsCharts的子级。这样，CallsCharts仅在CallsCharts完成查询api后才会呈现CallsList。

很简单：

class CallsCharts extends Component {
  componentDidMount () {
    // fetch charts
  }

  render() {
   const { charts } = this.props;

   if (checkChart(charts)) {
     return <CallsList />
   }
  }
}

Answer 2

组成您的组件并将其实现为功能组件。这样，您可以返回承诺并等待子组件中的解决。

render() {
  return (
  <div className="container-fluid">
    <CallsCharts>
      {({promise}) => <CallsList promise={promise}/>}
    </CallsCharts>
  </div>
);
}

反应组件顺序以获取数据

2 个答案: