Así que he estado trabajando con NextAuth durante algunas horas y he estado usando la API de Twitter para iniciar sesión/buscar tweets.

Tengo la mayoría de las cosas configuradas con facilidad, sin embargo, hay algunos problemas con el lado del cliente que obtiene las rutas API que creé en el servidor.

Índice.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), }, } }

Sigo recibiendo el error cannot read properties of undefined (reading 'map')

Aunque verifiqué en mis herramientas de desarrollo de React que el estado de los statuses tiene los datos que estoy tratando de mapear.

EDITAR - console.log de statuses