Obtuve algunos datos de mi base de datos Mongo que se devuelven como un objeto dentro de mi función de gancho useEffect, es decir, response en mi código. Luego declaro un estado myorders y quise establecer su valor proveniente de la API. Y finalmente. Quería mapear estos datos en diferentes filas en mi interfaz de usuario.

Pero el problema es que cuando trato de establecer Estado en el componente pasando las órdenes obtenidas en la función setState(), devuelve un objeto vacío. El console.log (estado) muestra una matriz vacía.

código

 import React, { useEffect, useState } from "react"; import { useRouter } from "next/router"; const Orders = () => { const router = useRouter(); const [myorders, setMyorders] = useState(); useEffect(() => { const fectOrders = async () => { let a = await fetch(`${process.env.NEXT_PUBLIC_HOST}/api/myorders`, { method: "POST", // or 'PUT' headers: { "Content-Type": "application/json", }, body: JSON.stringify({ token: localStorage.getItem("token") }), }); let response = await a.json(); console.log("RES = ",response) setMyorders(response.myorders) console.log("MY = ",myorders) } if (!localStorage.getItem("token")) { router.push("/"); } else { fectOrders(); } }, []); return ( <div className="container mx-auto"> <h1 className="font-bold text-center text-2xl p-8">My Orders</h1> <div className="flex flex-col"> <div className="overflow-x-auto sm:-mx-6 lg:-mx-8"> <div className="py-2 inline-block min-w-full sm:px-6 lg:px-8"> <div className="overflow-hidden"> <table className="min-w-full border-[1px]"> . . . </table> </div> </div> </div> </div> </div> ); }; export default Orders;

Y obtuve estos valores

Como puede ver, la API devuelve valor, pero setState() no funciona.

¿Qué hacer?