對象作為 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();
}, []);