在反應中使用 typescript 從 rest 國家 API 獲取嵌套數據

Question

我正在使用 typescript 來響應使用 restcountries API 獲取國家/地區的單個數據和國家/地區詳細信息，我嘗試在 API 中顯示語言和貨幣時出錯幫助嘗試學習如何獲取嵌套數據。 這是我的代碼

import { useParams } from "react-router-dom";
import { useState, useEffect } from "react";
import axios from "axios";

const Country = () => {
  interface country {
    name: {
      common: string;
      official: string;
    };
    capital: string;
    flags: {
      svg: string;
    };
    region: string;
    languages: [];
    currencies: [];
    timezones: string;
    borders: [];
  }

  const { id } = useParams();

  const [country, setCountry] = useState<any[]>([]);
  const [isLoading, setLoading] = useState<boolean>(false);
  const [isError, setError] = useState<any>(null);

  useEffect(() => {
    const singleData = async () => {
      try {
        setLoading(true);
        const response = await axios.get(
          `https://restcountries.com/v3.1/name/${id}`,
        );
        setCountry(response.data);
        console.log(response.data);
      } catch (err) {
        console.log(err);
        setError(err);
      } finally {
        setLoading(false);
      }
    };
    singleData();
  }, [id]);

  return (
    <div className='w-full h-screen p-4 flex justify-center items-center'>
      {isLoading && <p className='text-xl font-medium'>...Loading</p>}
      {isError && (
        <p className='text-xl font-medium'>Error loading country details </p>
      )}
      {country.map((country: country, key: number) => (
        <div
          key={key}
          className='w-4/5 rounded-2xl h-2/3 flex bg-slate-900 p-4 gap-4 text-slate-200 '>
          <div className='w-4/5 flex justify-center items-center'>
            <img
              className=' w-fit h-70 object-contain'
              src={country.flags.svg}
              alt='images'
            />
          </div>
          <div className='w-full h-full p-4'>
            <ul className=' list-none text-xl'>
              <li> Name: {country.name.common}</li>
              <li> Official Name: {country.name.official}</li>
              <li> Capital: {country.capital}</li>
              <li> Region: {country.region}</li>
              <li> Languages: {country.languages.name}</li>
              <li> Currencies: {country.currencies.name}</li>
              <li> Timezone: {country.timezones}</li>
              <li> Border: {country.borders.join(", ")}</li>
            </ul>
          </div>
        </div>
      ))}
    </div>
  );
};

export default Country;

Answer 1

根據文件，這是貨幣的形狀

"currencies": {
      "JPY": {
        "name": "Japanese yen",
        "symbol": "¥"
      }

您可以利用 Object.values、Array.map 和連接方法來做您想做的事。

您需要像這樣訪問它們：

Object.values(country.currencies).map(({name}) => name).join(', ')

這就是語言 object 的形狀

"languages": {
      "jpn": "Japanese"
    }

您可以像這樣訪問它們：

Object.values(country.languages).join(', ')