在 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，Route 组件的 render 道具需要一个有效的 React 元素或 React 元素数组 returned，因此，它不接受函数中的 Promise 对象 return。

但是，使用当前版本的 React 和 React Router 并非不可能实现您想要的。您只需要稍微调整一下代码。你的 render 应该 return 一个 React 组件，而不是 return 一个 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 组件知道数据已准备就绪，它应该重新渲染组件。

在 React Router v4 中渲染异步组件

Render async component in React Router v4

javascript

asynchronous

reactjs

react-router

react-router-v4