[英]React - Display loading screen while ajaxing
Unlike some of the other questions, my component has already fully loaded. 与其他一些问题不同,我的组件已经完全加载。 I have managed to create the loading screen BEFORE the component was loaded, but now I'm unsure of how to create it after.
在组件加载之前,我已经设法创建了加载屏幕,但是现在我不确定如何在此之后创建它。
What I'm trying to do right now is make an ajax call which then changes the state/(redux store) which should then display my loading screen. 我现在想做的是进行ajax调用,然后更改状态/(redux存储),然后应显示我的加载屏幕。
eg a child component calls an ajax: 例如,一个子组件调用一个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');
}
);
This is the parent render: 这是父渲染:
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);
I was expecting the this.props.loading
to turn true, which then displays the loading screen, which then goes away on the then
in the child component. 我期望
this.props.loading
变为true,然后显示加载屏幕, then
在子组件中的该屏幕上消失。 But instead nothing happens. 但是相反,什么也没有发生。 Will I need a middleware for this instead?
我是否需要一个中间件呢?
You need to dispatch an action
to set the state to loading when you send an ajax request
. you send an ajax request
时,您需要dispatch an action
以将状态设置为loading。 Instead you are dispatching an action in the success call
of ajax, soon after which you send the set_report
action which overrides the set_loading
action even before you notice. 取而代之的是,您在ajax的
success call
中调度一个动作,此后不久,您发送set_report
动作,该动作将覆盖set_loading
动作,甚至在您未注意到之前。
Use the ajax call like 使用像这样的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');
}
);
and call this dipatch where you send an ajax call 并在发送ajax调用的地方调用此dipatch
this.props.dispatch( { type: "set_loading", payload: false } );
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.