我想根据它从下面的 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了[]
不幸的是，最新版本的 React - 16。异步渲染还不是一个选项。
使用 React Router v4，组件的renderpropsRoute期望返回一个有效的 React 元素或 React 元素数组，因此，它不接受从你的函数返回的 Promise 对象。
然而，使用当前版本的 React 和 React Router 来实现你想要的并不是不可能的。你只需要稍微调整你的代码。您render应该返回一个 React 组件，而不是返回 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 知道数据已经准备好，它应该重新渲染组件。