定位不变违规的来源：对象作为 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)
...

.

指向：

App.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 以查看它是否是一个 promise：

_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 函数——当你调用一个没有 await 的 async 函数时，return 值是一个 Promise （毕竟，async/await 只是 Promises 的语法糖）。

您不能 return 来自 Route 渲染道具的 Promise - 它必须 return 一个组件。

定位不变违规的来源：对象作为 React 子项无效（找到：[object Promise]）

location the source of Invariant Violation: Objects are not valid as a React child (found: [object Promise])

reactjs

react-native-web

App.js:84