estoy recibiendo este error
Mainsection.js:27 TypeError no capturado: no se pueden leer las propiedades de undefined (leyendo 'mapa')
Aquí está mi archivo mainsection.js, estoy usando la clave API para iterar los datos, todavía no obtengo la causa del error. Primero hice una matriz cuyo nombre era info y almacené todos los datos en ella y luego la iteré. Ahora, después de usar fetchapi, eliminé esa matriz porque no servía de nada. No sé si estaba destinado a eliminar o no.
import React, { Component } from 'react' import Card from './Card' export default class Mainsection extends Component { constructor() { super(); this.state = { info:null } } async componentDidMount(){ let Url="https://randomuser.me/api/?inc=gender,name,nat,location,picture,email&results="; let data= await fetch(Url); let parsedData= await data.json() console.log(parsedData); this.setState({ info : parsedData.info }) } render() { return ( <div> <div className="container mt-5"> <div className="row"> {this.state.info.map((element) => { return <div className="col-md-4"> <Card key={element.email} name={element.name} location={element.location} gender={element.gender} imageUrl={element.picture.medium} /> </div> })} </div> </div> </div> ) } }Y aquí está mi archivo card.js
import React, { Component } from 'react' export default class Card extends Component { render() { let {name, location, gender, imageUrl}=this.props return ( <div> <div className="card" style={{ width: "18rem" }}> <img src={imageUrl} className="card-img-top" alt="..." /> <div className="card-body"> <h5 className="card-title">{name}</h5> <p className="card-text">{location}</p> <p className="card-text">{gender}</p> <a href="/" className="btn btn-primary">Go somewhere</a> </div> </div> </div> ) } }Por favor, déjame que debo proporcionar más detalles.
Puede encontrar un ejemplo de trabajo aquí: https://codesandbox.io/s/musing-hill-uxtt0
Hay otros problemas con su código. Por ejemplo, el nombre y la ubicación son objetos y está intentando mostrarlos directamente en la interfaz de usuario. También he agregado código para corregir el nombre.
Sección principal.js
import React, { Component } from "react"; import Card from "./Card"; export default class Mainsection extends Component { constructor() { super(); this.state = { info: null, results: null }; } async componentDidMount() { let Url = "https://randomuser.me/api/?inc=gender,name,nat,location,picture,email&results="; let data = await fetch(Url); let parsedData = await data.json(); console.log(parsedData); this.setState({ info: parsedData.info, results: parsedData.results }); } render() { console.log("results : ", this.state.results); return ( <div> <div className="container mt-5"> <div className="row"> {this.state?.results?.map((element) => { return ( <div className="col-md-4"> <Card key={element.email} name={element.name} location={element.location} gender={element.gender} imageUrl={element.picture.medium} /> </div> ); })} </div> </div> </div> ); } }Tarjeta.js
import React, { Component } from "react"; export default class Card extends Component { render() { let { name, location, gender, imageUrl } = this.props; return ( <div> <div className="card" style={{ width: "18rem" }}> <img src={imageUrl} className="card-img-top" alt="..." /> <div className="card-body"> <h5 className="card-title">{`${name?.title} ${name?.first} ${name?.last}`}</h5> <p className="card-text">{JSON.stringify(location)}</p> <p className="card-text">{gender}</p> <a href="/" className="btn btn-primary"> Go somewhere </a> </div> </div> </div> ); } }Entonces, la API que está utilizando no responde con un Array . Pero responde con un object , ese object tiene 2 attributes que son results e info . como puede ver abajo
{ "results": ... .... .... "info": ... } y results en sí mismos son una Array of objects , mientras que la info es solo un objeto.
Entonces, sí, no puede usar el mapa en el objeto, solo se puede usar en matrices. Revisa la respuesta cuidadosamente para que puedas decidir qué quieres hacer.