Error: Objects are not valid as a React child - 在 nextjs 中尝试在 page.tsx 上异步时

Question

我正在尝试在 nextjs 13“app”方法中使用 page.tsx 上的异步并不断出现此错误：

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.

这里是代码示例：

const AsynCfun = async () => {
    // reason i use async is because i have await on the http request
    const posts = await fetchPosts();

    return <div>async print posts...</div>
}

export default function Sidebar() {
    return <div>sidebar <AsynCfun/></div> // error...
}

Answer 1

不要认为你可以在 React 中使用异步组件，因为渲染是同步的。这里可以使用state和useEffect。

const AsynCfun = () => {
  const [posts, setPosts] = useState();

  useEffect(() => {
    const fetchAndSetData = async () => {
      const data = await fetchPosts();
      // do whatever needs to be done on data
      setData(data);
    };
    fetchAndSetData();
  });

  return <div>async print posts...</div>;
};

然后可以在侧边栏中正常呈现。一件事是 useEffect 回调不能直接异步，因此您必须创建异步函数并在其中执行任何有状态操作，如上所示。

希望有帮助， 最佳