Estoy tratando de obtener algunos datos de mi servidor node js que me devuelve una matriz. Al recibir esta matriz, quiero mapearla y mostrar varias iteraciones del mismo componente con estos datos. Sin embargo, la función de mapa no se ejecuta porque el valor de estado inicial que configuré era una matriz vacía. Mi pregunta es, ¿por qué la función de mapa no se ejecuta después de que se cambia el estado en la función useEffect? Aquí está el código:
const [groupData, setGroupData] = useState([]); useEffect(() => { const func = async () => { const fetchData = await fetch("http://localhost:5000/api/get-groups", { method: "GET", credentials: "include", headers: { "Content-Type": 'application/json', 'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE,PATCH,OPTIONS' } }) const jsonFetch = await fetchData.json(); setGroupData(jsonFetch.groupData); } func(); }, []) return ( {groupData.map((elem) => { <Card data={elem} /> })} )Pero las tarjetas simplemente no son visibles. Puedo console.log para ver los datos que entran en el acto de reacción como se esperaba. También intenté cambiar el segundo parámetro de la función useEffect a [groupData] en lugar de []. Pero todavía no funciona. Cualquier ayuda sería apreciada. ¡Gracias!
Parece que no devolviste nada del método .map() . Trate de hacer esto (quitar llaves):
return ( {groupData.map((elem) => <Card data={elem} /> )} )También se recomienda agregar claves uniq cuando renderice una lista ( https://reactjs.org/docs/lists-and-keys.html )
Cuando usa funciones async , debe continuar su lógica solo cuando se entrega el contenido solicitado. Debe implementar then la función, como en el siguiente ejemplo:
const [groupData, setGroupData] = useState([]); useEffect(() => { const func = async () => { fetch("http://localhost:5000/api/get-groups", { method: "GET", credentials: "include", headers: { "Content-Type": 'application/json', 'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE,PATCH,OPTIONS' } }).then(response => { setGroupData(response.json().groupData); }).catch(e => { // Ops, there's a problem... }); } func(); }, []) return ( {groupData.map((elem) => { <Card data={elem} /> })} )[]s
Porque groupData aún no tiene datos cuando se procesa el componente. Pruebe este código a continuación:
const [groupData, setGroupData] = useState([]); useEffect(() => { const func = async () => { try{ const fetchData = await fetch("http://localhost:5000/api/get-groups", { method: "GET", credentials: "include", headers: { "Content-Type": 'application/json', 'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE,PATCH,OPTIONS' } }) const jsonFetch = await fetchData.json(); setGroupData(jsonFetch.groupData); } catch (err){console.log(err)}; //<== Add try...catch to avoid app crash and catch error! } func(); }, []) return ( {groupData?.map((elem, index) => { <Card key={index} data={elem} /> })} //<== add "?" after groupData and key attribute in <Card /> ! )