如何解决如何在React App中显示微调器?
我有一个React App,我想展示一个微调器,何时处理需要一些时间才能完成,例如API请求,甚至是冗长的状态设置。我尝试了一个回调,例如:
this.setState({
showSpinner: true,},() =>
this.APIgiveMeTheWorld().then(
this.setState({
showSpinner: false,})
));
并具有以下异步功能:
await this.setState({
showSpinner: true,});
this.APIgiveMeTheWorld().then(
await this.setState({
showSpinner: false,})
);
但是在任何可辨别的点上,都不会显示 showSpinner 为真(因此,我的微调器永远不会出现)。实现这种功能的最佳方法是什么。
解决方法
您可以做的是只要showSpinner
状态为假,就显示微调框,并在状态变为假时将其隐藏
{ !showSpinner? <SpinnerComponent /> : <ResultShower /> }
在您的组件中,您可以在componentWillMount
生命周期中从API加载数据,并且在加载完成并且您从API的调用返回数据后,可以将showSpinner
状态更新为false,它将自动隐藏SpinnerComponent
并显示您要显示的其他内容。
componentWillMount() {
loadData().then((data) => {
// Here I consider get data from from you API request
this.setState({
data,showSpinner: false
});
})
}
,
我看到您在回叫then
中传递了setState的结果。您是否尝试过:
this.setState({
showSpinner: true,},() =>
//should pass a call back function to call right after api return.
this.APIgiveMeTheWorld().then(r => {
this.setState({
showSpinner: false,})
}));
,
问题出在我的API函数即时解析上。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。