0

Estoy armando un conversor de criptomonedas en react, el cual está casi terminado. Pero el único inconveniente es que no me estaría funcionando bien el siguiente código con "template literals". Tampoco puedo acceder a la ruta de esos valores con utilizando la url en el navegador. Hay algo que no estoy teniendo en cuenta o es que no termino de entender algo? o debería buscar otra forma de asignar esos states ? ?

acá el código con el problema en cuestión:

  useEffect(()=>{

            if (fromCurrency !=null && toCurrency != null) {
                fetch(`${cryptoUrl} ?current_price=${fromCurrency}&symbol=${toCurrency}` )
                .then(res => res.json(  ))  
                .then(data =>        
                   setExchangeRate(data.current_price[toCurrency])  )       
            }

        }, [fromCurrency, toCurrency])

acá dejo el código del componente completo con la api:

import React,  {useState, useEffect} from 'react'
import  CurrencyRow  from './CurrencyRow'



const OtherCurrency = () => {
    const cryptoUrl  = 'https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=100&page=1&sparkline=false'


    
        const [currencyOptions, setcurrencyOptions] = useState ([])
        const [fromCurrency, setFromCurrency] = useState ()
        const [toCurrency, setToCurrency] = useState ()
        const [exchangeRate, setExchangeRate] = useState()
        const [amount, setAmount] = useState (1)
        const [amountInFromCurrency, setAmountInFromCurrency ] = useState (true)

        
        

        let toAmount, fromAmount
        if (amountInFromCurrency) {
            fromAmount = amount
            toAmount = amount * exchangeRate
        } else{
            toAmount = amount
            fromAmount = amount / exchangeRate
        }    

    
        const currencyApi = async () =>{
            const response = await fetch(cryptoUrl)
            const data = await response.json() 
            
            setcurrencyOptions([ data.map((name)=>name.symbol), data.map((price)=>price.current_price)])
            setFromCurrency(data[0])
            setToCurrency(data[2])
            setExchangeRate(data[0].current_price)
            // console.log(data.map((price)=> price.current_price))
            // console.log(data.map((price)=> price.symbol))
        }
        

                
        useEffect(()=>{
            currencyApi()
           
        }, [])


        useEffect(()=>{

            if (fromCurrency !=null && toCurrency != null) {
                fetch(`${cryptoUrl} ?current_price=${fromCurrency}&symbol=${toCurrency}` )
                .then(res => res.json(  ))  
                .then(data =>        
                   setExchangeRate(data.current_price[toCurrency])  )       
            }

        }, [fromCurrency, toCurrency])

      



     function handleFromAmountChange(e){
        setAmount(e.target.value)
        setAmountInFromCurrency(true)
     }
     function handleToAmountChange(e){
        setAmount(e.target.value)
        setAmountInFromCurrency(false)
     }
     
    return (

   
        <div className="currencies">

            
                <CurrencyRow 
                currencyOptions={currencyOptions} 
                selectCurrency={fromCurrency} 
                onChangeCurrency={e => setFromCurrency(e.target.value)}
                onChangeAmount={handleFromAmountChange}
                amount={fromAmount}
                />
                
                <div>=</div>

                <CurrencyRow  
                currencyOptions={currencyOptions}  
                selectedCurrency={toCurrency} 
                onChangeCurrency={e => setToCurrency(e.target.value)}
                onChangeAmount={handleToAmountChange}
                amount={toAmount}
                />

                 

            </div>

           
              
    )
}

export default OtherCurrency

desde ya muchas gracias.

1 respuesta 1

1

En la URL original ya estás proporcionando una cadena de consulta (AKA Query String), que es todo lo que aparece desde ? hasta el final de la cadena:

https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=100&page=1&sparkline=false

Después, en la petición, agregas otra cadena de consulta que, además, tiene un espacio antes del ?:

fetch(`${cryptoUrl} ?current_price=${fromCurrency}&symbol=${toCurrency}`)

En resumen, no estás armando una URL válida, intenta con:

fetch(`${cryptoUrl}&current_price=${fromCurrency}&symbol=${toCurrency}` )
2
  • Gracias por marcarme esos errores. Pero sigue habiendo algo que me falla, porque cuando dejo la url así ``` "api.coingecko.com/api/v3/coins/markets" ``` sacándole todo lo de adelante para que busque lo que escribí me sigue dando error. Si la dejo así "api.coingecko.com/api/v3/coins/markets?vs_currency=usd" con el siguiente código sigue sin encontrar los datos fetch(`${cryptoUrl2}?current_price=${fromCurrency}&symbol=${toCurrency}` ) Estuve probando un rato en el navegador como acceder a esos datos pero al final siempre tira error. Commented el 22 jul. 2021 a las 22:47
  • @criaturaimaginaria, en fetch() remplaza ? por & para que la URL sea correcta.
    – Triby
    Commented el 22 jul. 2021 a las 23:31

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.