对象作为 React 子对象无效（找到：[object Promise]）答案

【问题标题】：Objects not valid as a React child (found: [object Promise])对象作为 React 子对象无效（找到：[object Promise]）
【发布时间】：2019-06-19 11:05:50
【问题描述】：

我有一个渲染路由的私有路由组件，当我使用async/await 调用方法时，它返回Uncaught Invariant Violation: Objects are not valid as a React child (found: [object Promise])。我需要改变什么？有一个checkTokenExpirationMiddlewareAdvertiser() 验证用户的角色并呈现正确的仪表板。似乎当我为用户async/await 时，承诺并没有完全解决。

我尝试从函数中删除async，但无法从函数中获取返回值。

const AdvertiserPrivateRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={props => {
      console.log(rest)
      if (!loggedInUser())
        return (
          <Redirect
            to={{ pathname: '/login', state: { from: props.location } }}
          />
        );
      return checkTokenExpirationMiddlewareAdvertiser(
        () => <Component {...props} />, // success component
        () => <AdvertiserError />, // failure component
      );
    }}
  />
);

export const checkTokenExpirationMiddlewareAdvertiser = async (success, fail) => {
  const { user } = await loggedInUser();
  console.log(user)
  if (user) {
    const { token } = user;
    if (jwtDecode(token).exp < Date.now() / 1000) {
      removeUser();
      return fail();
    }
    if (user.role !== 'advertiser') return fail();
    console.log('here');
    return success();
  }
  console.log("here")
  return fail();
};

【问题讨论】：

你正在调用 loggedInUser()，在 checkTokenExpirationMiddlewareAdvertiser 中等待，但在 AdvertiserPrivateRoute 中没有。显然，这不是你的错误，但从逻辑上讲这也没有道理。
是的..我如何在 AdvertiserPrivateRoute 中使用 await 调用它？
您可以在Promise 中触发它并使用then 链接或将AdvertiserPrivateRoute 声明为异步常量const AdvertiserPrivateRoute = async ({ component: Component, ...rest }) => ...
嘿，谢谢，我刚刚从checkToken 中删除了async，它运行良好。似乎错误来自async/await 的一个loooooong 行。谢谢，
您是否介意将我将在此处发布的内容标记为答案（稍后），作为答案，因为我确实解决了您的问题？

标签： javascript reactjs

【解决方案1】：

您对async await 和loggedInUser() 的使用不一致。

要么从checkTokenExpirationMiddlewareAdvertiser 中删除它
或添加到AdvertiserPrivateRoute（见下文）

取决于loggedInUser()是否为异步函数

const AdvertiserPrivateRoute = async ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={props => {
      console.log(rest)
      const userLoggedIn = await loggedInUser();
      if (!userLoggedIn)
        return (
          <Redirect
            to={{ pathname: '/login', state: { from: props.location } }}
          />
        );
      return checkTokenExpirationMiddlewareAdvertiser(
        () => <Component {...props} />, // success component
        () => <AdvertiserError />, // failure component
      );
    }}
  />
);

【讨论】：