Estoy tratando de ver los datos que obtengo de una API usando SWR y también configurando la moneda en la API a lo que sea que el usuario esté usando a través de la API de contexto, pero no puedo ver ningún dato. por favor alguien puede ayudar para saber lo que no estoy haciendo bien.
aquí está el código
import React from 'react' import useSWR from "swr"; import {CryptoState} from "../context/cryptoContext" import { useContext } from "react"; function Trending() { const {currency } = useContext(CryptoState) const address = `https://api.coingecko.com/api/v3/coins/markets?vs_currency=${currency}&order=gecko_desc&per_page=10&page=1&sparkline=false&price_change_percentage=24h`; const fetcher = async (url) => await axios.get(url).then((res) => res.data); const { data, error } = useSWR(address, fetcher); if (error) <p>Loading failed...</p>; if (!data) <h1>Loading...</h1>; return ( <div> {data && console.log(data)} </div> ) } export default Trending;El siguiente código funciona (probado):
import React from 'react' import useSWR from "swr"; function Trending() { const address = `https://api.coingecko.com/api/v3/coins/markets?vs_currency=USD&order=gecko_desc&per_page=10&page=1&sparkline=false&price_change_percentage=24h`; const { data, error } = useSWR(address); if (error) <p>Loading failed...</p>; if (!data) <h1>Loading...</h1>; return ( <div> <pre> <code> {JSON.stringify(data, null, 2)} </code> </pre> </div> ) } export default Trending; Verifique su const {currency } = useContext(CryptoState)
En su caso fetcher se necesita fetcher , la variable del buscador está hecha para casos complejos.
PD En lugar de verificar su moneda y usar useContext , puede enviar esta variable a su función directamente como function Trending(currency)