javascript - 在 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 元素数组，因此，它不接受Promise 对象从您的函数返回。

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

它应该是这样的:

<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 知道数据已准备好并且应该重新渲染组件。