Tengo una matriz de objetos devueltos por el servidor que debo mostrar en una tabla. Intenté usar el método array.map() para mapear los objetos como elementos de fila en otra matriz y luego mostrar esa matriz en el JSX como <tbody>{listItems}</tbody>
const TeacherTable = () => { let listItems async function getTeacherData() { const response = await fetch('http://localhost:1234/api/teacher') const res = await response.json() console.log(res.data) listItems = await res.data.map(record => ( <tr> <td>{record.teacherID}</td> <td>{record.teacherName}</td> <td>{record.teacherEmail}</td> </tr> )) } useEffect(() => { getTeacherData() }) return <tbody>{listItems}</tbody>; };No sé qué estoy haciendo mal, pero parece que no funciona. Traté de console.log () la matriz de datos para verificar si los datos se pasan a la interfaz y se transmiten sin ningún error, pero aún así la lista no se procesa.
¿Cómo represento esta lista de elementos de fila de la matriz?
Gracias por leer hasta aquí. Espero que tengas un gran día/noche por delante.
Hay algunas cosas que debe hacer:
listItems debe ser una variable de estado, lo que significa que provoca una nueva representación del componente cuando se actualiza, porque en este momento, cuando se configura listItems dentro de getTeacherData , el componente no se vuelve a representar. Lo he implementado como estado en el código actualizado a continuación (llamado items ahora). Si desea leer más sobre el estado y cómo provoca actualizaciones, debe consultar estouseEffect . La breve explicación de por qué es porque solo desea que se llame a useEffect una vez, para obtener una explicación más completa, debe leer esto . import {useState, useEffect} from "react"; const TeacherTable = () => { const [items, setItems] = useState([]); useEffect(() => { async function getTeacherData() { const response = await fetch('http://localhost:1234/api/teacher') const res = await response.json() console.log(res.data) setItems(res.data); } getTeacherData(); }, []); return <tbody>{items.map(record => ( <tr> <td>{record.teacherID}</td> <td>{record.teacherName}</td> <td>{record.teacherEmail}</td> </tr> ))}</tbody>; };