Estoy llamando a una API para obtener una matriz de usuarios, clasificarlos y colocarlos en una matriz si el personalTrainerId es igual a mi ID de usuario, y luego convertirlos en tarjetas.
Me gustaría recibir los datos como
Mis Clientes: [{'userId':86,'firstName':'Client','lastName':'23','email':'newclient@ab'},{'userId':96,'firstName':'cl ','apellido':'ie','email':'cl@ie'}]
Pero en cambio obtengo el resultado.
Mis Clientes: {'userId':86,'firstName':'Client','lastName':'23','email':'newclient@ab'},{'userId':96,'firstName':'cl' ,'apellido':'ie','email':'cl@ie'},
(Sin los corchetes)
Recibo la respuesta de la llamada, pero cuando trato de representarlos, el objeto vuelve como "indefinido". Soy bastante nuevo en esto y podría estar enfocándolo todo mal. Cualquier ayuda sería apreciada.
Mi código para agregar la respuesta a una matriz:
function AddClients(response){ const users = response.data; var newClient=""; const myId = parseInt(getUserId()) for(var i = 0; i < users.length; i++ ){ if (response.data[i].personalTrainerId === myId){ newClient=("{'userId':"+response.data[i].userId+",'firstName':'"+response.data[i].firstName+"', 'lastName':'"+response.data[i].lastName+"','email':'"+response.data[i].email+"'}") // myClients.push(JSON.parse(JSON.stringify(newClient))) } } console.log("Length after this: "+ myClients.length); // returns 57 as expected myClients.map(RenderCard) // Calling to render }Luego trato de renderizarlo en una tarjeta con bootstrap:
const RenderCard = (card, index) =>{ return( <Card border="dark" style={{ width: '18rem' }} key={index}> <Card.Header>Client number: {card.userId} </Card.Header> <Card.Body> <Card.Title>Name: {card.firstName} {card.lastName}{console.log("card firstname: " + card.firstName)} </Card.Title> // Console.log returns "card firstname: undefined" <Card.Text> Mail: {card.email} </Card.Text> </Card.Body> </Card> ) }__
Realmente no sé cómo obtener los datos correctos. ¿Hay un mejor enfoque? ¿Me estoy perdiendo algo? No recibo errores, y como soy nuevo en esto, realmente no sé cómo depurarlo correctamente.
Debe agregar su respuesta a un estado:
const [card, setCard] = React.useState({}); function AddClients(response){ setCard(response.data); }Después de eso, puede usar ese estado para representar los datos. Si desea representar una matriz, puede usar un código como este:
return ( <> { cards.map(card=> <Card border="dark" style={{ width: '18rem' }} key={index}> <Card.Header>Client number: {card.userId} </Card.Header> <Card.Body> <Card.Title>Name: {card.firstName} {card.lastName}{console.log("card firstname: " + card.firstName)} </Card.Title> // Console.log returns "card firstname: undefined" <Card.Text> Mail: {card.email} </Card.Text> </Card.Body> </Card> ) } </> );pero si tienes un objeto de tarjeta:
return ( <> <Card border="dark" style={{ width: '18rem' }} key={index}> <Card.Header>Client number: {card.userId} </Card.Header> <Card.Body> <Card.Title>Name: {card.firstName} {card.lastName}{console.log("card firstname: " + card.firstName)} </Card.Title> // Console.log returns "card firstname: undefined" <Card.Text> Mail: {card.email} </Card.Text> </Card.Body> </Card> ) } </> );