Javascript 反应-ajaxing时显示加载屏幕

与其他一些问题不同，我的组件已经完全加载。我已经设法在加载组件之前创建了加载屏幕，但是现在我不确定在加载之后如何创建它

我现在要做的是做一个ajax调用，然后更改状态/（redux存储），然后显示我的加载屏幕

e、 g.子组件调用ajax：

let url = "src/php/search.php";
axios.get(url, {
params: {
  report_id: data.id,
  type: "get_report"
}
})
.then( r =>
  {
    console.log(r.data);
    this.props.dispatch( { type: "set_loading", payload: false } );
    this.props.dispatch({ type: "set_report", payload: r.data });
    this.props.router.push('/form/start');
  }
);

这是父级渲染：

render()
{
  return (
    <div style={{padding: "0 5px"}}>
      <LoadingScreen loading={this.props.loading} /> <<<<< The loading screen
      <div style={{padding: "0"}}>
        <Link activeClassName="active" className="default bottom-radius" to='main'>Main Menu</Link>
        <Link activeClassName="active" className="default bottom-radius" to='search'>Search</Link>
        <a className="bottom-radius" style={{ float: "right", color : "blue", backgroundColor: "red", padding: "5px", cursor : "pointer" }} onClick={this.logout}>Logout</a>
      </div>
      <div style={{paddingTop: "10px"}}>
        {this.props.children}
      </div>

    </div>
  );
}

const App = connect(
(store) =>
{
    return {
      "user_id": store.component.user_id,
      loading: store.component.loading
    };
}) (AppComponent);

render（）
{
返回(
当您发送ajax请求时，您需要
调度一个操作
以将状态设置为加载。相反，您在ajax的
成功调用
中调度一个操作，之后不久您发送
设置报告
操作，该操作甚至在您注意到之前就覆盖了
设置加载
操作

像这样使用ajax调用

axios.get(url, {
params: {
  report_id: data.id,
  type: "get_report"
}
})
.then( r =>
  {
    console.log(r.data);
    this.props.dispatch({ type: "set_report", payload: r.data });
    this.props.router.push('/form/start');
  }
);

然后调用这个dipatch，在这里发送ajax调用

    this.props.dispatch( { type: "set_loading", payload: false } );

您不需要有条件地呈现吗？
this.props.loading？：{呈现您的孩子}
不，我只是把它作为一个
显示：none
在它没有被使用的时候。对不起，好像我发布了不完整的数据。我在ajax调用之前已经发送了道具，我刚刚意识到了问题所在。它没有显示，因为jquery的数据表实际上隐藏了我的文本，因为它显示在它下面。但是我会标记，因为它是接近的回答这个问题没问题，很高兴你解决了：）