0
362
VistasReact.js, ¿cómo usar correctamente la función map() para mostrar datos?
Estoy tratando de mostrar los datos del usuario en una de mis páginas en una aplicación de electrones. Obtengo los datos de firebase/firestore y luego los coloco en una matriz, luego, quiero mostrar esos datos en una tabla pero no puedo mostrar los datos en la página.
Aquí está mi código:
function Home() { const [allUsers] = useState([]); useEffect(() => { const fetchData = async () => { try { const querySnapshot = await getDocs(collection(db, 'users')); let allDocs = []; querySnapshot.forEach((doc) => { allDocs.push({ ...doc.data(), id: doc.id }); }); for (const item of allDocs) { allUsers.push(item); } } catch (err) { console.log(err); } console.log(allUsers) }; fetchData(); }, []); return <div className="home"> {Object.keys(allUsers).map((keyName) => ( <p>{allUsers[keyName].firstname}</p> ))} </div>; }Así es como se ven los datos:
3 Respuestas
Responde la pregunta0
Debería usar un setter de estado para actualizar allUsers . Estás mutando datos (patrón anti React). Intenta hacerlo (agregué comentarios en el código):
function Home() { const [allUsers, setAllUsers] = useState([]); // line I changed useEffect(() => { const fechedUsers =[]; // line I added const fetchData = async () => { try { const querySnapshot = await getDocs(collection(db, 'users')); let allDocs = []; querySnapshot.forEach((doc) => { allDocs.push({ ...doc.data(), id: doc.id }); }); for (const item of allDocs) { fechedUsers.push(item); } } catch (err) { console.log(err); } setAllUsers(fechedUsers) // line I added }; fetchData(); }, []); // lines I changed return <div className="home"> {allUsers.map(user => <p>{user.firstname}</p>)} </div>; }0
Actualmente usa Object.keys() para mapear sobre la matriz. Cuando usa esta función, recibe una matriz con todos los índices fuera de la matriz. Entonces, esto significa que obtendrá una matriz con los datos [0, 1, ... ] dependiendo de la longitud de los datos.
Pero debido a que usa una matriz, puede mapear inmediatamente todos los objetos en la matriz. Como esto:
return <div className="home"> {allUsers.map((user) => ( <p>{user.firstname}</p> ))} </div> La variable de usuario será el objeto que haya insertado en la matriz allUsers. También debe usar un setter de estado como useState
0
No necesita usar el índice para iterar sobre la respuesta. Cuando usa la función de mapa, obtiene acceso al índice como un parámetro dentro de la función de mapa y puede usarlo si es necesario.
return ( <div className="home"> {allUsers.map((user, index) => { return( <div key={index} className='user-data'> //if you're using a table might need to change the `p` tag with `td` inside a `tr` <p>{user.firstname} </p> </div> ) } )} </div>);