对象作为 React 子项无效（找到：[object Promise]）next.js 13

Question

当我将我的页面设置为异步 function 时，为什么会出现此错误？ 当它不是异步 function 时，一切正常。唯一的区别是它返回一个挂起的 object，这不是我想要的。

这就是我获取数据的方式：

const getData = async (id) => {
const res = await fetch({
    url: "http://localhost:3000/api/user/getOne",
    method: "POST",
    credentials: true,
    body: {
        userId: "637846eb8f36e20663a9c948",
    },
});
return res;

};

然后这是页面 function

export default async function Page() {

const profileData = await getData();

useEffect(() => {
    console.log(profileData);
}, []);
return(<div><p>Hello</p></div>)
}

我认为问题与异步 function 和等待有关。 我该如何解决？

Answer 1

在 useEffect 中移动异步

export default function Page() {    
    
    useEffect(() => {    
      
     const getAll= async () => {
        const profileData = await getData();
        console.log(profileData);

     };

     getAll(); // run it, run it
    }, []);
    
  return(<div><p>Hello</p></div>)
}

Answer 2

可以尝试以下代码的想法。

import { useState } from "react";

export default async function Page() {
    const [profileData, setProfileData] = useState([]);
    async function initDate() {
        const response = await getData();
        setProfileData(response);
    }
    useEffect(() => {
        initDate();
        console.log(profileData);
    }, []);
    return (<div><p>Hello</p></div>)
}

Answer 3

直接在客户端组件的组件主体内部调用 function 是不好的，因为每次重新渲染组件时，您的 function 都会被执行。

最好将它们写在 useEffect 中并带有依赖关系。

如果你只想运行一次 function，你应该使用一个空数组作为依赖：

useEffect(() => {
  // your code
}, []);

如果你想在一个或多个状态发生变化时运行它们，你应该这样做：

useEffect(() => {
  // your code
}, [/* list of the dependencies */]);

所以在你的情况下，它会是这样的：

useEffect(() => {
  const getProfileData = async () =>  {
    await getData();
  }

  getProfileData();
}, []);