Блог

С помощью React я создаю инструмент анализа криптовалюты с данными из CoinGecko API. У меня возникли проблемы с получением изображений из этого API в мое приложение. Вот файл json из API: https://api.coingecko.com/api/v3/coins/bitcoin?tickers=falseamp;market_data=falseamp;community_data=falseamp;developer_data=falseamp;sparkline=false

Я пытаюсь получить image.small данные, но это не работает. Кто-нибудь знает, как это исправить? Очень ценится.

 import React, { useState, useEffect } from 'react';
import axios from "axios";
import "./CoinInfo.css";

const CoinInfo = ({ match }) => {
    const [coinData, setCoinData] = useState([]);
    const [coinHistory, setCoinHistory] = useState([]);

    useEffect(() => {
        const coinDataRequest = axios.get(`https://api.coingecko.com/api/v3/coins/${match.params.id}?localization=falseamp;tickers=trueamp;market_data=falseamp;community_data=falseamp;developer_data=falseamp;sparkline=false`)
        const coinHistoryRequest = axios.get(`https://api.coingecko.com/api/v3/coins/${match.params.id}/market_chart?vs_currency=usdamp;days=max`);
        axios.all([coinDataRequest, coinHistoryRequest])
        .then(
            axios.spread((coinDataResponse, coinHistoryResponse) => {
                setCoinData(coinDataResponse.data);
                setCoinHistory(coinHistoryResponse.data);
            })
            )
        .catch(error => console.log(error))
    }, [match.params.id])
    
    return (
        <div className="app-contents-container">
            <div className="coin-info-container">
                <div className="coin-info-introduction-container">
                    <div className="coin-info-logo-title-container">
                        <div className="coin-info-logo-container">
                            <img src={coinData.image.small} alt="Bitcoin logo"></img>
                        </div>
                    </div>
                    <div className="coin-info-price-container">
                        <p>{coinData.categories}</p>
                    </div>
                </div>
                <div className="coin-info-tokenomics-container">

                </div>
            </div>
        </div>
    )
}

export default CoinInfo

  

Есть две основные проблемы, которые я мог найти в вашем коде, позвольте мне объяснить одну за другой.

Изначально coinData это массив, вероятно, вам нужно {} вместо useState в качестве первого:

 const [coinData, setCoinData] = useState({});
  

Также данные поступают асинхронно, что требует времени, поэтому вам нужно проверить coinData.image на null или undefined как:

 { coinData.image amp;amp; <img src={coinData.image.small} alt="Bitcoin logo"></img> }