Estoy tratando de mostrar los datos obtenidos en mi página, pero solo puedo ver los datos a través de console.log y sigo recibiendo este error:
Error: el tipo de elemento no es válido: esperaba una cadena (para componentes integrados) o una clase/función (para componentes compuestos) pero obtuvo: objeto. Probablemente olvidó exportar su componente desde el archivo en el que está definido, o puede haber mezclado las importaciones predeterminadas y con nombre.
// import StudentContainer from './containers/StudentContainer'; const API = 'https://api.hatchways.io/assessment/students'; class App extends Component { constructor(props) { super(props) this.state = { allStudents: [] } } componentDidMount() { fetch(API) .then(resp => resp.json()) .then(students => { console.log(students.students[0].city) this.setState({ allStudents: students.students }) }); } // <StudentContainer allStudents={allStudents} /> render () { console.log("state:",this.state) const { allStudents} = this.state return ( <div className="App"> {console.log("students:", allStudents[0])} <h2>Students: {allStudents[0]} </h2> </div> ) } } export default App; esta consola registra un objeto con valores clave {console.log("students:", allStudents[0])}
pero justo en la parte inferior cuando intento representarlo en la página, <h2>Students: {allStudents[0].city} </h2>
se vuelve indefinido.
Aquí hay un fragmento de los datos:
{city: 'Fushë-Muhurr', company: 'Yadel', email: 'iorton0@imdb.com', firstName: 'Ingaberg', grades: Array(8), …} city: "Fushë-Muhurr" company: "Yadel" email: "iorton0@imdb.com" firstName: "Ingaberg" grades: (8) ['78', '100', '92', '86', '89', '88', '91', '87'] id: "1" lastName: "Orton" pic: "https://storage.googleapis.com/hatchways-app.appspot.com/assessments/data/frontend/images/voluptasdictablanditiis.jpg" skill: "Oracle"```{allStudents.map((item, i) => ( <div key={i} className="App"> <h2>Students: {item.city} </h2> </div> ))}Prueba esto, lo probé por ti y funciona.
La regla es que NO PUEDE mostrar objetos sin formato en la interfaz de usuario/HTML. O cree un componente real/HTML utilizando los datos del objeto, o simplemente JSON.stringify .
En su aplicación, intente cambiar la línea con la etiqueta <h2> a: <h2>Students: {JSON.stringify(allStudents[0])} </h2>
Otro problema está en esta línea de su componente StudentContainer <> {"studentcontainer:", props.allStudents.map(student => student.city)}</> .
Una cadena, luego una coma, luego una matriz no es JS realmente válido. Intente cambiar esto a <pre>{JSON.stringify(props.allStudents.map(student => student.city))}</pre< y debería mostrarse al menos.
(Esta parte está tachada porque OP eliminó el código en el componente StudentContainer para simplificar su pregunta, lo cual es genial)