0
192
Vistasmapeo y filtrado de una matriz de objetos con clave
Tengo una serie de objetos para los usuarios:
const users = [ 0: { name: "John", email: "jsmith@gmail.com" }, 1: { name: "Bob", email: "bsmith@gmail.com" } ]Un estado de uso que controla qué ID de usuario se selecciona.
const [id, setId] = useState("1");Por ejemplo, tengo un estado predeterminado establecido en id=1
Estoy tratando de mapear y filtrar a través de la matriz de objetos de arriba para obtener el nombre y el correo electrónico según la identificación dentro de la matriz para el objeto.
Aquí está el código de lo que estoy tratando de hacer, pero no parece obtener los datos de una matriz de objetos.
{Object.keys(users).filter((user) => user.id === id).map((user, index) => { const userDetails = users[user] return ( <div className="profile" key={index}> <h1>{userDetails.name}</h1> <h1>{userDetails.email}</h1> </div> ); })}Cualquier ayuda sería apreciada.
3 Respuestas
Responde la pregunta0
users es una matriz de objetos. Así que solo usa el índice sin filtro o mapa:
const userDetails = users[id] return ( <div className="profile"> <h1>{userDetails.name}</h1> <h1>{userDetails.email}</h1> </div> );0
Para agregar a la respuesta aceptada:
Incluso si users fueran un objeto, Object.keys(users).filter((user) => user.id === id).map() es redundante si solo está interesado en un solo usuario. Solo puede acceder al objeto de los users directamente por la identificación seleccionada como una clave.
import { useState } from "react"; const users = { 0: { name: "John", email: "jsmith@gmail.com" }, 1: { name: "Bob", email: "bsmith@gmail.com" }, 2: { name: "Jill", email: "jjones@gmail.com" }, 3: { name: "Joan", email: "jjohnson@gmail.com" } }; export default function App() { const [selectedUserId, setSelectedUserId] = useState("0"); return ( <> <div className="profile"> <h1>{users[selectedUserId].name}</h1> <h1>{users[selectedUserId].email}</h1> </div> <label> selected user id: <input type="number" min={0} max={Object.keys(users).length - 1} value={selectedUserId} onChange={(e) => { setSelectedUserId(e.target.value); }} /> </label> </> ); } 
0
La sintaxis de la declaración de sus usuarios es incorrecta. Cámbielo a una matriz o un objeto. Ahora es una mezcla de ambos en sintaxis incorrecta.
El código siguiente es un ejemplo viable.
export default function App() { const [id, setId] = useState("1"); const users = { 0: { name: "John", email: "jsmith@gmail.com" }, 1: { name: "Bob", email: "bsmith@gmail.com" } } return ( <div> <h1>Hello StackBlitz!</h1> <p>Start editing to see some magic happen :)</p> {!!users[id] && <div className="profile"> <h1>{ users[id].name}</h1> <h1>{users[id].email}</h1> </div> } </div> ); }