在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，render组件的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知道数据已准备好并且应该重新呈现组件。