Tengo una API con personas. Estoy tratando de mostrar los nombres de las personas.
"peoples": [ { "id": 2, "mainModule": "bonding", "description": "some random description 2", "persons": [ { "id": 3, "name": "hari", "completed": false }, { "id": 4, "name": "meenu", "completed": false } ] "id": 1, "mainModule": "bonding2", "description": "some random description 2", "persons": [ { "id": 3, "name": "jisa", "completed": false }, { "id": 4, "name": "stepy", "completed": false } ] }, ]Estos son mis datos en api
estoy usando axios para establecer un estado llamado elementos
axios .get( "url", config ) .then((res) => { console.log(res.data.peoples)//this works console.log(res.data.peoples.persons);//here i am getting error this.setState({ items: res.data.peoples.persons}); error }Estoy tratando de pasar personas para poder mapear nombres de personas en JSX
he cambiado el codigo ayuda pls
¡Bienvenido a StackOverflow! Como puede ver en su primer fragmento, tiene una matriz dentro de las peoples por lo que la forma correcta de acceder sería:
res.data.peoples[0].persons
Espero que esto resuelva tu problema. Puedes leer más sobre esto en los documentos de MDN
editar:
Si desea iterar sobre personas, puede hacer esto:
res.data.peoples.map(person => ( <div key={person.id}>{person.name}</div> ));Recuerde que debe pasar una clave única al componente para que React pueda crear y mantener la lista correctamente. Más información al respecto en los Docs .
res.data.peoples es una matriz, por lo que debe iterar sobre ella. No tiene propiedad de personas, tiene [0], [1], etc. Intente iniciar sesión res.data.peoples[0].persons
De los datos de muestra que mostró, peoples es una matriz. Entonces, para acceder a las personas, debería poder acceder usando lo siguiente, por ejemplo, si desea acceder al primer elemento de la matriz:
res.data.peoples[0].personsDe lo contrario, si desea acceder a él como res.data.peoples.persons, debe cambiar la salida de su API para que sea así:
"peoples": { "id": 2, "mainModule": "bonding", "description": "some random description 2", "persons": [ { "id": 3, "name": "hari", "completed": false }, { "id": 4, "name": "meenu", "completed": false } ] }