Estoy trabajando en una tarea en la que necesito acceder a los datos de una API. Más recientemente, veo que mi código está funcionando para recuperar los datos... pero cuando trato de recorrer los datos y mostrarlos en mi navegador... recibo el error:
Error no capturado (en promesa): los objetos no son válidos como un elemento secundario de React (encontrado: objeto con claves {common, official, nativeName}). Si tenía la intención de representar una colección de niños, use una matriz en su lugar.
Encontré preguntas similares en Stack Overflow... pero estaban usando async/await y no buscar para recuperar sus datos.
¿Podría alguien explicar qué estoy haciendo mal aquí?
Código a continuación:
import React, { Component } from "react"; export default class App extends Component { constructor(props) { super(props); this.state = { items: [], isLoaded: false, }; } // fetches data and sets state which rerenders App componentDidMount() { fetch("https://restcountries.com/v3.1/all") .then((res) => res.json()) .then((json) => { this.setState({ isLoaded: true, items: json, }); }); } render() { var { isLoaded, items } = this.state; if (!isLoaded) { return <div>Loading...</div>; } else { return ( <div className="App"> <ul> {items.map((item) => ( <li key={item.id}>{item.name}</li> ))} ; </ul> </div> ); } } }En realidad, la propiedad de nombre también es un objeto. He aquí un ejemplo de su contenido.
{common: 'Malta', official: 'Republic of Malta', nativeName: {…}} En reactJS, no puedes renderizar un objeto así. O lo convierte en una cadena usando, por ejemplo JSON.stringify(myobj) o extrae los atributos que desea. En este caso, probablemente debería seleccionar lo que desea mostrar, por ejemplo:
render() { var { isLoaded, items } = this.state; if (!isLoaded) { return <div>Loading...</div>; } else { return ( <div className="App"> <ul> {items.map((item) => ( <li key={item.id}>{item.name.common}</li> ))} ; </ul> </div> ); } }También noté que su API puede manejar la internacionalización, puede manejarla en reaccionar usando react-intl, por ejemplo.
Creo que lo que está tratando de hacer es representar todo el objeto, no puede hacer eso, intente representar cada elemento. La segunda parte de mi respuesta es que debe usar una tarea asíncrona, porque está trabajando con un navegador web.
espero que mi respuesta te oriente
import React, { Component } from "react"; export default class App extends Component { constructor(props) { super(props); this.state = { items: [], isLoaded: false, }; } // fetches data and sets state which rerenders App componentDidMount() { fetch("https://restcountries.com/v3.1/all") .then((res) => res.json()) .then((json) => { console.log(json) this.setState({ isLoaded: true, items: json, }, () => { console.log("DONE") }); }); } render() { var { isLoaded, items } = this.state; if (!isLoaded) { return <div>Loading...</div>; } else { return ( <div className="App"> <ul> {(items || []).map((item, index) => { return <li key={index}>{item.name.common}</li> })} </ul> </div> ); } } }