Je travaille actuellement sur un projet fourni par frontendmentor.io appelé API Rest Countries.

Ici, j'essaie d'obtenir un seul pays, et à l'aide de codes à 3 lettres dans le tableau des frontières, j'essaie d'obtenir les noms des pays frontaliers. Mais ils n'apparaîtront pas dans le navigateur. Quelqu'un peut-il aider? Qu'est-ce que je rate? Merci d'avance

import React, { useEffect, useState } from "react";
import { Link, useParams } from "react-router-dom";
import { useGlobalState } from "../context";

const url = "https://restcountries.eu/rest/v2/name/";
const url2 = "https://restcountries.eu/rest/v2/alpha/";

function Country() {
  const { countryName } = useParams();
  const [isLoading, setIsLoading] = useState(true);
  const [countryBorders, setCountryBorders] = useState([]);
  const [country, setCountry] = useState(null);

  const { isDarkMode } = useGlobalState();

  const fetchingSingleCountry = async () => {
    let newBorders = [];
    const response = await fetch(url + countryName);
    const data = await response.json();
    const borders = data[0].borders;
    borders.map(async (border) => {
      const response = await fetch(url2 + border);
      const data = await response.json();
      newBorders.push(data.name);
      setCountryBorders(newBorders);
    });
    setCountryBorders(newBorders);
    setCountry(data[0]);
    setIsLoading(false);
  };

  useEffect(() => {
    fetchingSingleCountry();
  }, []);

  if (isLoading) {
    return (
      <div className="title-center">
        <h1>Loading</h1>
      </div>
    );
  }

  const {
    flag,
    name,
    nativeName,
    population,
    region,
    subregion,
    capital,
    topLevelDomain,
    currencies,
    languages,
  } = country;
  return (
    <div className="single-country">
      <div className="single-country-img">
        <img src={flag} alt={name} />
      </div>
      <div className="single-country-info">
        <h1>{name}</h1>
        <div>
          <div className="info-left">
            <p>
              <span className="text-info">native name: </span>
              {nativeName}
            </p>
            <p>
              <span className="text-info">population: </span>
              {population}
            </p>
            <p>
              <span className="text-info">region: </span>
              {region}
            </p>
            <p>
              <span className="text-info">sub region: </span>
              {subregion}
            </p>
            <p>
              <span className="text-info">capital: </span>
              {capital}
            </p>
          </div>
          <div className="info-right">
            <p>
              <span className="text-info">top level domain: </span>
              {topLevelDomain.join(",")}
            </p>
            <p>
              <span className="text-info">currencies: </span>
              {currencies.map((currency, index) => {
                return (
                  <>
                    <span key={index}>{currency.name}</span>
                    <span
                      className={`${
                        index === currencies.length - 1 ? "not-show" : ""
                      }`}
                    >
                      ,{" "}
                    </span>
                  </>
                );
              })}
            </p>
            <p>
              <span className="text-info">languages: </span>
              {languages.map((language, index) => {
                return (
                  <>
                    <span key={index}>{language.name}</span>
                    <span
                      className={`${
                        index === languages.length - 1 ? "not-show" : ""
                      }`}
                    >
                      ,{" "}
                    </span>
                  </>
                );
              })}
            </p>
          </div>
        </div>
        <div className="border-countries">
          <p>Borders</p>
          <div>
            {countryBorders.map((border, index) => {
              return <p>{border}</p>;
            })}
          </div>
        </div>
      </div>
    </div>
  );
}

export default Country;
-2
Dragneel NN 1 mars 2021 à 17:47

1 réponse

Meilleure réponse

Votre problème était que vous définissiez le setCountryBorders(newBorders); deux fois et que vous créiez un bac à sable pour vous.

démo

1
E_net4 could use more flags 2 mars 2021 à 09:43