javascript - 尝试访问 Api 中的数组但没有返回任何内容

Question

我正在尝试访问 Api 中的数组，但不幸的是它没有返回任何内容。该行是 <p>边框的标记。下面是我的代码:

// import './App.css';
import { useEffect } from "react";
import { useState } from "react";

function CountryDetail({ match }) {
  useEffect(() => {
    fetchItem();
    console.log(match);
  }, []);

  const [country, setCountry] = useState(null);

  const fetchItem = async () => {
    try {
      const fetchCountry = await fetch(
        `https://restcountries.eu/rest/v2/name/${match.params.name}`
      );
      const country = await fetchCountry.json();
      setCountry(country[0]);
      console.log(country[0]);
    } catch {
      // leave state alone
    }
  };

  return (
    country && (
      <div>
        <h1> Name: {country.name} </h1>{" "}
        <p> Native Name: {country.nativeName} </p>{" "}
        <p> Region: {country.region} </p>{" "}
        <p>
          {" "}
          Languages: {country.languages.map(({ name }) => name).join(", ")}{" "}
        </p>{" "}
        <p>
          {" "}
          Borders: {country.borders.map(({ border }) => border).join(", ")}{" "}
        </p>{" "}
      </div>
    )
  );
}

export default CountryDetail;

我得到上面的行是 Api 中的一个对象。但是，对于数组，我似乎没有通过数组进行映射。任何帮助将不胜感激。

Answer 1

如果country.borders是一个数组，您可以通过以下方式实现映射:

Borders: {country.borders.join(', ')}

我认为没有必要像你一样使用 .map