0
211
Vistas¿Por qué los datos de esta API no se procesan en la página React?
API para obtener todos los datos de kamForms
router.get('/kam', (req, res) => { kamForm .find() .then((result) => { res.status(200).json({ kamData: result, }); }) .catch((err) => { console.log(err); res.status(500).json({ message: err, }); }); });Y esta es la llamada a la API y la parte de renderizado, cuando inspecciono el navegador, todos los datos se muestran en la consola repetidamente. Adjuntaré las ss de la consola.
const PendingApplication = () => { const [data, setData] = useState([]); useEffect(() => { axios .get('http://localhost:5000/api/kam') .then((response) => { console.log(response); setData(response.data); }) .catch((error) => { console.log(error); }); }); return ( <div> <Table> <TableBody> {[data].map((item, index) => ( <TableRow key={index}> <TableCell>{item.kcpname}</TableCell> <TableCell>{item.companyname}</TableCell> <TableCell>{item.ticketno}</TableCell> <TableCell>{item.totalemp}</TableCell> <TableCell>{item.kcpnid}</TableCell> <TableCell>{item.kcpcontact}</TableCell> </TableRow> ))} </TableBody> </Table> </div> ); };
2 Respuestas
Responde la pregunta0
Dos problemas.
Primero, está causando un bucle infinito en su enlace useEffect porque no se proporciona una matriz de dependencia. Esto ejecutará el efecto en cada renderizado (que a su vez establece el estado una vez que axios se resuelve, provocando otro renderizado, que ejecuta el efecto, etc.).
En segundo lugar, está mapeando una matriz [data].map , donde data ya son una matriz de resultados. Probablemente debería querer escribir data.map en su lugar.
const PendingApplication = () => { const [data, setData] = useState([]); useEffect(() => { axios .get("https://rickandmortyapi.com/api/character") .then((response) => { console.log(response); setData(response.data.results); }) .catch((error) => { console.log(error); }); }, []); return ( <div> <table> <tbody> {data.map((item, index) => ( <tr key={index}> <td>{item.name}</td> <td>{item.status}</td> <td>{item.species}</td> </tr> ))} </tbody> </table> </div> ); }; 
0
useEffect(() => { axios .get('http://localhost:5000/api/kam') .then((response) => { console.log(response); setData(response.data); }) .catch((error) => { console.log(error); }); },[]); return ( <div> <Table> <TableBody> {data && data.map((item, index) => ( <TableRow key={index}> <TableCell>{item.kcpname}</TableCell> <TableCell>{item.companyname}</TableCell> <TableCell>{item.ticketno}</TableCell> <TableCell>{item.totalemp}</TableCell> <TableCell>{item.kcpnid}</TableCell> <TableCell>{item.kcpcontact}</TableCell> </TableRow> ))} </TableBody> </Table> </div> );Use corchetes vacíos como este al final de UseEffect. Todo funcionará bien. Y también asegúrese de que los datos no sean nulos o indefinidos antes de renderizar.