ingrese la descripción de la imagen aquí Estoy usando useEffect hook para usar fetch api pero no funciona. cuando solo hay una api, funciona bien, pero cuando uso otra api para obtener datos usando el gancho useEffect en la función createData, da error.

Investigué un poco y creo que se debe a algunos problemas causados al volver a renderizar el componente en reaccionar. Traté de buscar la solución pero no pude encontrarla, así que la estoy publicando. Si hay alguna pregunta, por favor pregúnteme. en los comentarios daré más detalles al respecto.

 export default function Unpaid({ transporterId, getFn }) { const [itemData, setItemData] = useState([]); const [resData, setResData] = useState([]); const idUrl = "https://url..."; useEffect(() => { let mounted = true; fetch(idUrl) .then((data) => data.json()) .then((data) => setResData(data)); return () => (mounted = false); }, []); console.log(resData, "response data"); const dispatchId = resData.map((item) => item.id); console.log(dispatchId, "dispatch id"); function createData( po, id ) { useEffect(() => { fetch( "https://url+id" ) .then((data) => data.json()) .then((data) => setItemData(data)); }, []); console.log(itemData, "yohohoho"); return { po, }; } function Row(props) { const { row } = props; const [open, setOpen] = React.useState(false); return ( <> jsx content </> ); } const rows = resData.map((item) => createData( item.purchase_order_details.po_number && item.purchase_order_details.po_number.length > 0 ? item.purchase_order_details.po_number : "NA", item.id ) ); return ( <> jsx content </> ); }