Tengo un problema para mostrar mis datos que obtengo de una API, realmente no sé qué está mal aquí...
Traté de usar la función map () para acceder a los datos, pero tampoco funciona como se esperaba
import React from "react"; import axios from 'axios'; const options = { method: 'GET', headers: { Accept: 'application/json', Authorization: 'API_KEY' } }; export default class List extends React.Component { state = { locations: [] } componentDidMount() { axios.get('https://api.foursquare.com/v3/places/search?query=gallery%20&ll=48.85%2C2.35&radius=10000&categories=10004&sort=DISTANCE', options) .then(res => { const locations = res.data; console.log(locations.results) return this.setState({ locations }); }) } render() { return ( <div> <ul> <div>{this.state.locations.results}</div> </ul> </div> ) } }Tengo estos dos errores que aparecen
1: Error: los objetos no son válidos como hijos de React (encontrado: objeto con claves {fsq_id, categorías, cadenas, distancia, códigos geográficos, ubicación, nombre, lugares relacionados}). Si tenía la intención de representar una colección de niños, use una matriz en su lugar
2: Rechazo de promesa no manejado: Error: los objetos no son válidos como hijos de React (encontrado: objeto con claves {fsq_id, categorías, cadenas, distancia, códigos geográficos, ubicación, nombre, lugares relacionados}). Si quisieras renderizar una colección de niños...
Este es el objeto que obtuve en el registro:
Cualquier pista sería de mucha ayuda, gracias!! :)
Según la captura de pantalla, obtienes una matriz. React/JSX no solo saca la matriz, debe iterar sobre ella. Aquí hay un fragmento con un componente funcional y un enlace personalizado:
const { useEffect, useState } = React const useFetchData = () => { const [response, setResponse] = useState([]) const [loading, setLoading] = useState(false) useEffect(() => { setLoading(() => true) fetch('https://jsonplaceholder.typicode.com/users') .then(res => res.json()) .then(json => setResponse(() => json)) .finally(setLoading(() => false)) }) return { response, loading } } const App = () => { const { response, loading } = useFetchData() return ( <div> { response.length && !loading ? response.map(({ id, name, username }) => { return ( <div key={id}>{id} - {name} - {username}</div> ) }) : "Loading users..." } </div> ) } ReactDOM.render( <App />, document.getElementById('root') ); <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> <div id="root"></div>Aunque usó un componente de clase en su ejemplo y este es un componente funcional en mi fragmento, la idea básica es la misma: si desea mostrar una matriz de elementos en JSX, debe iterar sobre ellos con una función de iterador que en realidad devuelve un elemento JSX.