在React Router v4中渲染异步组件

Question

我想基于它从下面的API接收的有效负载来渲染组件

<Route path="/foo/bar" render={() => {
  return (get('/some/api').then((res) => {
    return <Baz data={res.data} />
          }).catch((err) => console.log))
        }} />

但是我收到了错误:

Objects are not valid as a React child (found: [object Promise]). If you 
meant to render a collection of children, use an array instead. 

甚至当我做包裹Baz在[]

Answer 1

不幸的是,最新版本的React - 16.异步渲染还不是一个选项.

使用React Router v4,组件的renderprops Route需要返回有效的React Element或React Elements数组,因此,它不接受从函数返回的Promise对象.

但是,使用当前版本的React和React Router实现您的目标并非不可能.您只需稍微调整一下代码即可.您render应该返回React Component,而不是返回Promise,然后您可以根据该组件内的异步值进行条件渲染.

它应该看起来像:

<Route path="/foo/bar" render={BazWrapper} />


class BazWrapper extends React.Component {

    // Do asynchronous action here
    async componentDidMount() {
       try {
          const apiValue = await get('/some/api');
          this.setState({ apiValue })
       } catch(err) {
          // error handling
       }
    }

    render() {
        const { apiValue } = this.state; 
        return <Baz data={apiValue} />;
    }

}

通过setState在异步调用完成后调用,您可以让React Component知道数据已准备就绪,并且应该重新呈现组件.