Soy nuevo para reaccionar y obtener datos api. No sé cómo mostrar datos json en uno de mis componentes. He usado axios para obtener datos de api y estos son mis datos json devueltos
{ "result": true, "items": [ { "excerpt": "egghead is your source for the Badass Portfolio Projects you need to climb the career ladder as a modern web developer.", "_id": 360690368, "title": "Build the portfolio you need to be a badass web developer.", "link": "https://egghead.io/", "domain": "egghead.io" }, { "excerpt": "From career choices to new purchases, use René Girard's mimetic theory to resist the herd and forge your own path in life", "_id": 359605780, "link": "https://psyche.co/guides/how-to-know-what-you-really-want-and-be-free-from-mimetic-desire?ref=refind", "title": "How to know what you really want | Psyche Guides", "domain": "psyche.co" } ], "count": 2, "collectionId": 0 }Aquí está el componente de la lista:
import * as React from "react" import axios from "axios" axios.get("https://api.abc.com", { method: "get", headers: { Authorization: `Bearer xxxxxxxx-xxxx-xxxx-xxxx-xxxx`, "Content-Type": "application/x-www-form-urlencoded", }, }) .then(res => { const bookmarks = JSON.stringify(res.data) console.log(bookmarks) }) .catch(error => { console.error(error) }) const IndexPage = ({ bookmarks }) => ( <> <h1>Show Data</h1> <div> {bookmarks.items.map(bookmark => ( <div>{bookmark.title}</div> ))} </div> </> ) export default IndexPage¿Alguien puede ayudarme a mostrar la lista? Gracias por adelantado
Esta no es la forma en que funciona la recuperación de datos en reaccionar ... debe recuperar sus datos en los componentes useEffect y almacenar sus datos en useState hook, lo que hará que se vuelvan a procesar y puede acceder a estos datos:
import * as React from "react" import axios from "axios" const IndexPage = () => ( const [bookmarks, setBookmarks] = React.useState() React.useEffect(()=>{ axios.get("https://api.abc.com", { method: "get", headers: { Authorization: `Bearer xxxxxxxx-xxxx-xxxx-xxxx-xxxx`, "Content-Type": "application/x-www-form-urlencoded", }, }) .then(res => { const bookmarks = JSON.stringify(res.data) setBookmarks(bookmarks) }) .catch(error => { console.error(error) }) },[]) return( <> <h1>Show Data</h1> <div> {bookmarks.items.map(bookmark => ( <div>{bookmark.title}</div> ))} </div> </> )editar: con solución de carga personalizada:
import * as React from "react" import axios from "axios" const IndexPage = () => ( const [loading, setLoading] = React.useState(true) const [bookmarks, setBookmarks] = React.useState() React.useEffect(()=>{ axios.get("https://api.abc.com", { method: "get", headers: { Authorization: `Bearer xxxxxxxx-xxxx-xxxx-xxxx-xxxx`, "Content-Type": "application/x-www-form-urlencoded", }, }) .then(res => { const bookmarks = JSON.stringify(res.data) setBookmarks(bookmarks) }) .catch(error => { console.error(error) }).finally(()=>{setLoading(false)}); },[]) if(loading){ return (<>Loading...</>) } return( <> <h1>Show Data</h1> <div> {bookmarks.items.map(bookmark => ( <div>{bookmark.title}</div> ))} </div> </> )