问题

I see you want the code to be translated. Here's the translation of the code you provided:

我对这个错误感到非常困扰，不知道如何修复它。这是我的代码：

'使用客户端'
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 Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.'。我错在哪里？

<details>
<summary>英文:</summary>
I&#39;m freaking out about this error and don&#39;t understand how to fix it. Here is my code :

'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

This is the component where I get the error :

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

I didn't understand why I get this error 'Unhandled Runtime Error
Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.'
Where am I wrong ?
</details>
# 答案1
**得分**: 0
React在抱怨这个问题：
```javascript
const ProfileSection = async () => {
-------------------------^

未处理的运行时错误错误：对象不能作为React子元素（发现：[object Promise]）

您的组件是async的，这意味着它返回一个Promise，但React无法处理它。

现在，可能最简单的解决方案是将async函数移到useEffect内部，然后使用它返回的数据设置本地状态。然后您可以在组件中使用该状态。

从长远来看，您可能需要考虑在何时需要该数据，或者是否要将其提供给多个组件。在这种情况下，您可能需要使用全局状态解决方案（有很多选择），或者使用自定义钩子来包含该具有状态的逻辑以便重用。

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

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

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