reactjs Next.js13，为什么我得到'错误：对象作为React子对象无效(找到：[object Promise]).'？

ma8fv8wu 于 2023-04-20 发布在 React

关注(0)|答案(1)|浏览(118)

我被这个错误吓坏了，不知道如何修复它。下面是我的代码：

'use client'
import React, { useState } from 'react'
import AnimatedDiv from '../../../(shop)/(components)/animatedDiv'
import ProfileSection from './profileSection'
import AccountSection from './accountSection'
import SubscriptionSection from './subscriptionSection'

const SettingsPageOrchestrator = () => {
  const [renderedSection, setRenderedSection] = useState('Profile')

  return (
    <div >
      <div >
        <button          
          onClick={() => setRenderedSection('Profile')}
        >
          Profile
        </button>
        <button
          onClick={() => setRenderedSection('Account')}
        >
          Account
        </button>
        <button
          onClick={() => setRenderedSection('Subscription')}
        >
          Subscription and billing
        </button>
      </div>
      <InnerSection section={renderedSection} />
    </div>
  )
}

const InnerSection = ({ section }) => {
  return (
    <div>
      {section === 'Profile' && (
        <AnimatedDiv>
          <ProfileSection />
        </AnimatedDiv>
      )}
      {section === 'Account' && (
        <AnimatedDiv>
          <AccountSection />
        </AnimatedDiv>
      )}
      {section === 'Subscription' && (
        <AnimatedDiv>
          <SubscriptionSection />
        </AnimatedDiv>
      )}
    </div>
  )
}

export default SettingsPageOrchestrator

这是我得到错误的组件：

import React from 'react'
import ProfileContent from './profileContent'
import ProfileSkeletron from './profileSkeletron'
import { SETTINGS_PROFILE_USER } from '../../../../apiUtils/costants'

import { getAuthenticatedServerSide } from '../../../../apiUtils/utils'
import { getServerSession } from 'next-auth'
import { authOptions } from '../../../../pages/api/auth/[...nextauth]'

const ProfileSection = async () => {
  const session = await getServerSession(authOptions)
  const data = await getAuthenticatedServerSide(
    session?.user?.access_token,
    SETTINGS_PROFILE_USER
  )

  return (
    <div>
      <ProfileContent data={data} />
    </div>
  )
}

export default ProfileSection

我不明白为什么我得到这个错误'Unhandled Runtime Error错误：对象作为React子对象无效（找到：[object Promise]）。如果你想呈现一个子元素的集合，请使用数组。'
我哪里错了？

reactjs

来源：https://stackoverflow.com/questions/76052035/nextjs13-why-i-get-error-objects-are-not-valid-as-a-react-child-found-obje

1条答案

按热度按时间

3phpmpom1#

React对此表示不满：

const ProfileSection = async () => {
-------------------------^

未处理的运行时错误：对象作为React子对象无效（找到：[object Promise]）
你的组件是async，这意味着它返回了一个promise，但React无法处理它。
也许最简单的解决方案（目前）是将async函数移动到useEffect中，然后使用它返回的数据设置本地状态。然后您可以在组件中使用该状态。
从长远来看，你可能需要考虑在什么时候你希望数据可用，或者它是否可以被多个组件使用。在这一点上，你可能需要使用全局状态解决方案（of which there are many），或者可能需要一个自定义钩子来包含有状态逻辑以供重用。

import { useEffect, useState } from 'react';

function ProfileSection() {

  const [ data, setData ] = useState(null);

  useEffect(() => {
    async function getData() {
      const session = await getServerSession(authOptions)
      const data = await getAuthenticatedServerSide(
        session?.user?.access_token,
        SETTINGS_PROFILE_USER
      );
      setData(data);
    }
    getData();
  }, []);

  if (!data) return <div>No profile</div>;

  return (
    <div>
      <ProfileContent data={data} />
    </div>
  );

}

export default ProfileSection

赞(0）回复(0）举报 2023-04-20

我来回答

reactjs Next.js13，为什么我得到'错误：对象作为React子对象无效(找到：[object Promise]).'？

1条答案

相关问题

热门标签

最新问答