reactjs - 定位 Invariant Violation 的来源：对象作为 React 子项无效（发现：[object Promise]）

Question

堆栈跟踪没有指向问题的根源：

Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.
    in Route (at App.js:84)
    in Switch (at App.js:78)
...

.

这指向：

应用程序.js:84

<Route path="/callback" render={props => this.onRouteToCallback(props)} />
//...
async onRouteToCallback ({ location }) {
  return <View><Text>test</Text></View> // added to debug

堆栈跟踪下方是显示 setState 的片段，因此我添加了该状态的 console.log 以查看它是否是一个承诺：

_callee4$
src/App.js:122
  119 | 
  120 |   console.log('apolloClient', JSON.stringify(apolloClient))
  121 | 
> 122 |   this.setState({ apolloClient })
      | ^  123 | }
  124 | 
  125 | async relayAuthToGraphcool() {

但这不是一个承诺，只是一个普通的 js 对象。

如何找到错误的根源？

Answer 1

this.onRouteToCallback是一个async函数 - 当你调用一个async没有await前面的函数时，返回值是一个 Promise（毕竟async/await只是 Promises 的语法糖）。

您不能从Route渲染道具返回 Promise - 它必须返回一个组件。