[英]React router 4: How to wait for a promise to resolve, inside render method of Route?
我正在尝试实现功能,其中每个Route将首先等待一些ajax承诺解决,然后才会呈现路由。 我看到onEnter不再存在,所以我正在尝试渲染方法。
我的路线定义如下:
{cmsRoutes.map((route, idx) => {
console.log(route.resolve)
return route.component ? (<Route key={idx} path={route.path} exact={route.exact} name={route.name} render={props =>{
route.resolve()
.then(({data})=>{
console.log(data)
return (
<route.component {...props} />
)
})
} } />)
: (null);
},
)}
正如您所看到的,它只是迭代某个数组,它保存每个路由的数据。 路由对象的一个字段是“resolve”,它指向一个返回promise的函数。 像这个:
const resolvemanageContactApplications = ()=> {
return ajax('/contact')
};
执行此操作时,我收到以下错误:
路线(...):渲染没有返回任何内容。 这通常意味着缺少return语句。 或者,为了不渲染,返回null。
这当然会发生,因为在执行ajax时,路由没有返回任何内容。 问题是:如何让React路由器4等待承诺解析? 必须有某种方式。 我记得AngaulrJS UI-Router实际上有一些“解决”api。
你需要另一种方法。
如果你的ajax完成了,你应该使用一个状态来存储。 然后,为了渲染路径,如果未完成ajax,则可以不渲染任何内容(null或... loading),并使用ajax的结果渲染实际组件或任何您想要的内容。
我可以看到你正在基于一组数据生成路由,为了实现这一点,我将创建一个Component来包装数据加载条件。 它可以作为道具接收:
在componentDidMount和componentDidUpdate上执行ajax调用并将state.waitingResolve
设置为true,并在resolve的state.waitingResolve
.then()
上,将state.waitingResolve
设置为false,并将返回的数据也存储到状态。
在渲染上,您检查state.waitingResolve
,并渲染null(或... loading)或渲染您从props收到的组件。
它可能看起来很复杂但值得。
您可以创建一些异步组件包装器,如:
class AsyncComponent extends PureComponent {
constructor(props) {
super(props);
this.state = {
Component: null
};
}
componentDidMount() {
const { componentPromise } = this.props;
componentPromise.then(component => this.setState({
Component: component
}));
}
render() {
const { Component } = this.state;
if (!Component) {
return null; // You can return some spinner here
}
return (
<Component {...this.props} />
);
}
}
并在路由器中使用它:
<Route
key={idx}
path={route.path}
exact={route.exact}
name={route.name}
render={props => (
<AsyncComponent componentPromise={route.resolve} {...props} />
)}
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.