如何修复对象是无效的作为一个React子错误在下一个JS 13和下一个Auth?

Question

我正在使用firebase和next auth的下一个JS 13构建一个应用程序。在我实现firebase到Next Auth并使用会话后，它抛出一个错误。

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.

当我控制台记录会话时，它的值按预期返回，甚至当我使用image属性时，它显示图像。但是它会多次抛出这个错误。我不知道有什么问题吗?

我所做的是，在我的page.jsx中，我像这样导入会话。

import { useSession, signIn, signOut } from "next-auth/react";

后来

const { data: session } = useSession([]);
console.log(session);

控制台返回值是

{user: {…}, expires: '2023-02-14T10:09:58.384Z'}

用户返回

user:
email: "[e-mail]"
image: "https://lh3.googleusercontent.com/a/AEdFTp7e3CC9nfTaGDkKD-mebf-wxL6qZKyf70jArUw5=s96-c"
name: "Mohammed Bekele"

有人能帮我一下吗?

Answer 1

尝试使用async/await语法来处理这样的承诺:

import { useSession, signIn, signOut } from "next-auth/react"; 
export default async function test() {
const { data: session } = useSession([]);
const activeSession = await session;
console.log(activeSession);
if(activeSession) {
// return session data
{session.user.name}
{session.user.email}
<img className="" src={session.user.image} alt="" />
console.log(session);
} else {
// return login page
}
}

或者，您可以使用.then()函数，如下所示:

import { useSession, signIn, signOut } from "next-auth/react"; 

const { data: session } = useSession([]);
session.then(session => {
console.log(session);
if(session) {
// return session data
{session.user.name}
{session.user.email}
<img className="" src={session.user.image} alt="" />
} else {
// render the component for unauthenticated user
}
});