Les données de l'API CoinGecko ne sont pas définies après un nouveau rendu React JS

Question

Essayer de rendre les données de la API de CoinGekco dans mon composant React. Cela fonctionne au premier rendu mais si je quitte la page ou que je la rafraîchis, coin.market_data est indéfini. J'ai également essayé de passer coin à la useEffect() et cela n'a pas fonctionné.

import React, { useEffect, useState } from "react";
import axios from "../utils/axios";
import CoinDetail from "./CoinDetail";

function CoinPagePage() {
  const [coin, setCoin] = useState({});

  useEffect(() => {
    const getCoin = () => {
      const coinid = window.location.pathname.split("/").splice(2).toString();
      axios
        .get(`/coins/${coinid}`)
        .then((res) => {
          setCoin(res.data);
          console.log(res.data);
        })
        .catch((error) => console.log(error));
    };
    getCoin();
  }, []);

  return (
    <div>
      <CoinDetail current_price={coin.market_data.current_price.usd} />
    </div>
  );
}

export default CoinPagePage;

Answer 1

Le site GET request ne se produit que lors du rendu de la page parent. Si le composant enfant est rendu à nouveau, le code de récupération ne sera pas exécuté à nouveau. Au lieu de passer current_price comme un accessoire pour votre <CoinDetail> vous pouvez essayer de passer coinid et faire la recherche dans votre page détaillée.

De cette façon, lorsque la page est rafraîchie, l'élément request sera à nouveau exécuté.

Modifier

Si vous essayez d'accéder à une propriété inexistante sur un objet, votre application se plantera. Ce que vous pouvez faire pour éviter que cela ne se produise est de vérifier si la propriété request est fait, avant d'essayer d'accéder à la propriété.

Une façon d'y parvenir est de définir la valeur de l'état initial à null

const [coin, setCoin] = useState(null);

Puis, au-dessus de la principale return vous pouvez vérifier si la valeur est null Si c'est le cas, il faut renvoyer une sorte d'écran de chargement.

if(coin === null) return <LoadingScreen />;

// main render
return (
  <div>
    <CoinDetail current_price={coin.market_data.current_price.usd} />
  </div>
);

De cette façon, lorsque la recherche est terminée, l'état est mis à jour et la page est rendue à nouveau et affiche le contenu mis à jour.