Question

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

我现在尝试做的是进行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);

我希望this.props.loading变为true，然后显示加载屏幕，然后在子组件的then上消失。但没有任何反应。我需要一个中间件吗？

Answer 1

您需要dispatch an action将状态设置为you send an ajax request时加载。相反，您将在ajax的success call中发送操作，在此之后不久，您发送set_report操作会覆盖set_loading操作，甚至在您发现之前。

使用像

这样的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');
  }
);

并在发送ajax呼叫的地方调用此dipatch

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

React - 在ajaxing时显示加载屏幕

1 个答案: