javascript - 前端导师休息国家 API

Question

我目前正在开发一个由 frontendmentor.io 提供的名为 Rest Country API 的项目。

在这里，我试图获得一个国家，并在边界数组中的 3 个字母代码的帮助下，我试图获得边境国家的名称。但它们不会出现在浏览器中。任何人都可以帮忙吗？我错过了什么？提前致谢

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;

标签： javascriptreactjsapifetch

Answer 1

您的问题是您设置了setCountryBorders(newBorders);两次，为您创建了一个沙箱。

演示