Reactjs 通过React路由器从应用程序组件以传递状态（通过api加载）面临问题

我在通过React路由器从应用程序组件传递状态时面临问题。在App组件的ComponentwillMount函数中，状态通过API加载，该API通过在Route组件的render函数中指定来传递给登录组件

但是，登录组件在App setState之前加载。我需要将此状态传递给所有其他组件。请帮忙

import React, { Component } from 'react';
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      language: 'en',
      labels: null,
    };
  }
  componentDidMount() {
    let language = getLanguage(); //from url
    this.setState({ language }, async () => {
      await this.getLabels();
    });
  }
  getLabels = () => {
    //Hit Api to fetch labels on basis of language set
    this.setState({ labels: data });
  };
  render() {
    return (
      <div className='App'>
        <Router>
          <Switch>
            <Route
              exact
              path='/'
              render={(props) => (
                <Login labels={this.state.labels} {...props} />
              )}
            />
          </Switch>
        </Router>
      </div>
    );
  }
}
export default App;


import React, { Component } from 'react';

export default class Login extends Component {
  render() {
    console.log(this.props.labels);
  }
}

import React，{Component}来自'React'；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
语言:"en",，
标签：空，
};
}
componentDidMount（）{
让language=getLanguage（）；//从url
this.setState（{language}，async（）=>{
等待此消息。getLabels（）；
});
}
getLabels=（）=>{
//点击Api以根据语言集获取标签
this.setState（{labels:data}）；
};
render（）{
返回(
(
)}
/>
);
}
}
导出默认应用程序；
从“React”导入React，{Component}；
导出默认类登录扩展组件{
render（）{
console.log（this.props.labels）；
}
}

---

登录组件中未定义this.props.labels。

在api调用成功之前，是否可以尝试显示一个loder

import React, { Component } from 'react';
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      language: 'en',
      labels: null,
      fetchingLabels:true
    };
  }
  componentDidMount() {
    let language = getLanguage(); //from url
    this.setState({ language }, async () => {
      await this.getLabels();
    });
  }
  getLabels = () => {
    //Hit Api to fetch labels on basis of language set
    this.setState({ labels: data, fetchingLabels:false });
  };
  render() {
    if(this.state.fetchingLabels){
      return 'I am loading'   // you can add your loader here
    }
    return (
      <div className='App'>
        <Router>
          <Switch>
            <Route
              exact
              path='/'
              render={(props) => (
                 <Login labels={this.state.labels} {...props} />
              )}
            />
          </Switch>
        </Router>
      </div>
    );
  }
}
export default App;


import React, { Component } from 'react';

export default class Login extends Component {
  render() {
    console.log(this.props.labels);
  }
}

import React，{Component}来自'React'；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
语言:"en",，
标签：空，
获取标签：true
};
}
componentDidMount（）{
让language=getLanguage（）；//从url
this.setState（{language}，async（）=>{
等待此消息。getLabels（）；
});
}
getLabels=（）=>{
//点击Api以根据语言集获取标签
this.setState（{labels:data，fetchingLabels:false}）；
};
render（）{
if（this.state.fetchingLabels）{
return'I am loading'//您可以在此处添加加载器
}
返回(
(
)}
/>
);
}
}
导出默认应用程序；
从“React”导入React，{Component}；
导出默认类登录扩展组件{
render（）{
console.log（this.props.labels）；
}
}

请添加您的代码添加有问题的代码。