0
143
Views¿Cómo mostrar la matriz de datos de respuesta en mi aplicación React?
Estoy tratando de crear una aplicación CRUD MERN simple. En esta aplicación, los datos se muestran en mi consola, pero los quiero en mi parte de la interfaz de usuario.
Aquí está el registro de la consola: 
Este es el archivo Alluser.js donde quiero mostrar los datos de la consola que provienen de mi backend:
import React, { useEffect, useState } from "react"; import { Link } from "react-router-dom"; import { getUsers } from "./api"; const UserData = () => { const [users, setUser] = useState([]); useEffect(() => { AllUsers(); }, []); const AllUsers = async () => { const response = await getUsers(); console.log(response.data); setUser(response.data); }; return ( <div> <div className="container"> <table className="table table-hover table-bordered mt-3"> <thead> <tr> <th scope="col">No</th> <th scope="col">Name</th> <th scope="col">Email</th> <th scope="col">Phone</th> <th scope="col">Action</th> </tr> </thead> <tbody> {users.map((index,user) => { <tr key={index}> <th scope="row">{user.id}</th> <td>{user.email}</td> <td>{user.name}</td> <td>{user.phone}</td> </tr>; })} </tbody> </table> </div> </div> ); }; export default UserData;3 answers
Answer question0
No se muestra, debido a la parte de su map , donde no está devolviendo nada. Prueba esto:
{users.map((user, index) => ( <tr key={index}> <th scope="row">{user.id}</th> <td>{user.email}</td> <td>{user.name}</td> <td>{user.phone}</td> </tr>; ))}0
{users.map((user,index) => { <tr key={index}> <th scope="row">{user.id}</th> <td>{user.email}</td> <td>{user.name}</td> <td>{user.phone}</td> </tr>; })}La función de mapa tiene 2 parámetros, el primero es su elemento
0
Cuando está mapeando una matriz de valores, se debe mantener el orden de los parámetros de la función de mapa, que es
map((user) => { ... }) map((user, index) => { ... }) map((user, index, array) => { ... }) En su código, ha mencionado el parámetro de índice antes del parámetro de usuario, lo que le dará undefined cuando intente acceder al usuario. [cualquier cosa].
si cambia el orden del usuario y el índice, debería funcionar.
también, algunos consejos gratuitos sobre el código: usar el índice como clave no es uno de los mejores enfoques como se menciona en los documentos oficiales, puede leer más sobre esto aquí