React 和 Next 映射返回未定义

Question

所以我已经使用 NextAuth 几个小时了，并且一直在使用 Twitter API 到 login/search 来发推文

我已经轻松设置了大部分内容，但是我的客户端在获取我在服务器上创建的 API 路由时存在一些问题。

Index.js

export default function Home() {
const { data: session } = useSession()
  const [statuses, setStatuses] = useState();


 useEffect(() => {
    
 fetch('api/twitter/search')
 .then(response => response.json(),)
 .then(response => setStatuses(response))
 .catch(err => console.error(err));

 console.log(statuses)

  
 }, [])



 
 



  if (session) {
    return (
      <>
      Welcome {session.user.name}<br/>
        Signed in as {session.user.email} <br />
 
      
        {statuses.map((st) => (
         <p>{st.data.id}</p>
))}


        <button onClick={() => signOut()}>Sign out</button>
      </>
    )
  }
  return (
    <>
      Not signed in <br />
      <button onClick={() => signIn()}>Sign in</button>
    </>
  )
  

  
}

export async function getServerSideProps(context) {
  return {
    props: {
      session: await getSession(context),
    },
  }
}

我一直收到错误 cannot read properties of undefined (reading 'map')

即使我已经在我的 React 开发工具中检查过 statuses 状态确实有我试图映射的数据。

编辑 - console.log 共 statuses

Answer 1

export default function Home() {
const { data: session } = useSession()
  const [statuses, setStatuses] = useState([]);


 useEffect(() => {
    
 fetch('api/twitter/search')
 .then(response => response.json(),)
 .then(response => setStatuses(response?.data))
 .catch(err => console.error(err));

 console.log(statuses)

  
 }, [])


    return (
    <>
      {session && 
        <>
          Welcome {session?.user?.name}<br/>
          Signed in as {session?.user?.email} <br />
          {statuses?.map((st) => (<p>{st?.id}</p>))}
          <button onClick={() => signOut()}>Sign out</button>
        </>
       }
      {!session &&
        <>
          Not signed in <br />
          <button onClick={() => signIn()}>Sign in</button>
        </>
    </>
    )
}

export async function getServerSideProps(context) {
  return {
    props: {
      session: await getSession(context),
    },
  }
}

在 state 设置到 useEffect 之前，您获得了 session 值。在 map 之前添加 ? 将消除错误 statuses?.map

React 和 Next 映射返回未定义

React and Next map returning undefined

javascript

reactjs

next.js