在 React 中使用 .map() 时，任何人都可以帮助解决类型错误问题吗？

Question

有人能帮我解决这个错误吗？我正在尝试为国家名称创建一个下拉选择器，从以下 API 路径中提取：https ://api.covid19api.com/countries

TypeError: Country.map is not a function

at fetchCountries (index.js:29)

at async fetchAPI (CountryPicker.jsx:13)

这是我正在处理的两个代码部分：

CountryPicker.jsx

import React, { useState, useEffect } from 'react';

import { NativeSelect, FormControl } from '@material-ui/core';

import styles from './CountryPicker.module.css';

import { fetchCountries } from '../../api';

const CountryPicker = () => {

  const [fetchedCountries, setFetchedCountries] = useState([]);

  useEffect(() => {

    const fetchAPI = async () => {

      setFetchedCountries(await fetchCountries());

    };

    fetchAPI();

  }, [setFetchedCountries]);

  console.log(fetchedCountries);

  return (

    <FormControl className={styles.formControl}>

      <NativeSelect >

        <option value="">Global</option>

      </NativeSelect>

    </FormControl>

  );

};

export default CountryPicker;

index.js

import axios from 'axios';

const summary = 'https://api.covid19api.com/summary';

const countriesURL = 'https://api.covid19api.com/countries';

export const fetchData = async () => {

    try {

        const { data: { Global: { NewConfirmed, TotalConfirmed, NewDeaths, TotalDeaths, NewRecovered, TotalRecovered, }, Date } } = await axios.get(summary);

        return {  NewConfirmed, TotalConfirmed, NewDeaths, TotalDeaths, NewRecovered, TotalRecovered, Date };

    } catch (error) {

        console.log(error);

    }

}

//TODO

//Fetch Daily Data for charts using axios

export const fetchCountries = async () => {

    try {

      const { data: [ {Country} ] } = await axios.get(countriesURL);

     return Country.map((Country) => Country);

    } catch (error) {

      console.log(error);

    }

  };

我试图查找错误可能发生的原因，我发现 .map() 不适用于不是数组的变量，但我不确定当前的实现，如何解决这个问题

API 中的数据如下所示：

[

    {"Country":"Micronesia, Federated States of","Slug":"micronesia","ISO2":"FM"},

    {"Country":"Bangladesh","Slug":"bangladesh","ISO2":"BD"},

    {"Country":"Bouvet Island","Slug":"bouvet-island","ISO2":"BV"},

    // ...and so on...

]

Answer 1

查看调用 API 的结果，是这样的形式：[&nbsp; &nbsp; {"Country":"Micronesia, Federated States of","Slug":"micronesia","ISO2":"FM"},&nbsp; &nbsp; {"Country":"Bangladesh","Slug":"bangladesh","ISO2":"BD"},&nbsp; &nbsp; {"Country":"Bouvet Island","Slug":"bouvet-island","ISO2":"BV"},&nbsp; &nbsp; // ...and so on...]所以Country不是数组，它是数组中每个对象的属性。如果您的目标是Country从每个对象中提取属性，请获取数组，然后使用map提取该属性，也许使用解构：const data = await axios.get(countriesURL);return data.map(({Country}) => Country);

Answer 2

重组在这里没有得到妥善处理。const { data: [ x ] } = {data: [{"Country":"Micronesia, Federated States of","Slug":"micronesia","ISO2":"FM"},{"Country":"Bangladesh","Slug":"bangladesh","ISO2":"BD"}]}这里x将{"Country":"Micronesia, Federated States of","Slug":"micronesia","ISO2":"FM"}下一个：const {Country} = x国家将在这里"Micronesia, Federated States of"and"Micronesia, Federated States of"是一个字符串，它没有map函数。{ data: [ {Country} ] }访问所有密钥的错误方法也是如此。const fetchCountries = async () => {&nbsp; try {&nbsp; &nbsp; const countries = await axios&nbsp; &nbsp; &nbsp; .get(countriesURL)&nbsp; &nbsp; &nbsp; .then((x) => x.data);&nbsp; &nbsp; return countries.map(({ Country }) => Country);&nbsp; } catch (error) {&nbsp; &nbsp; console.log(error);&nbsp; &nbsp; return []&nbsp; }};const fetchCountries = async () => {&nbsp; try {&nbsp; &nbsp; const countries = await axios&nbsp; &nbsp; &nbsp; .get("https://api.covid19api.com/countries")&nbsp; &nbsp; &nbsp; .then((x) => x.data);&nbsp; &nbsp; return countries.map(({ Country }) => Country).sort();&nbsp; } catch (error) {&nbsp; &nbsp; console.log(error);&nbsp; &nbsp; return []&nbsp; }};fetchCountries().then(console.log);<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>获取其他信息：// const axios = require("axios"); // for node jsconst fetchCountriesInfoParallel = async (countries = []) => {&nbsp; const promises = countries.map((country) =>&nbsp; &nbsp; axios&nbsp; &nbsp; &nbsp; .get(`https://api.covid19api.com/live/country/${country}`)&nbsp; &nbsp; &nbsp; .then(({ data }) => data)&nbsp; );&nbsp; try {&nbsp; &nbsp; return await Promise.all(promises);&nbsp; } catch (error) {&nbsp; &nbsp; console.log(error);&nbsp; &nbsp; return [];&nbsp; }};fetchCountriesInfoParallel(["Afghanistan", "Albania", "Algeria"]).then(&nbsp; console.log);const fetchCountriesInfoSeries = async (countries = []) => {&nbsp; let results = [];&nbsp; for (let index = 0; index < countries.length; index++) {&nbsp; &nbsp; const country = countries[index];&nbsp; &nbsp; const data = await axios&nbsp; &nbsp; &nbsp; .get(`https://api.covid19api.com/live/country/${country}`)&nbsp; &nbsp; &nbsp; .then(({ data }) => data);&nbsp; &nbsp; results.push(data);&nbsp; }&nbsp; return results;};fetchCountriesInfoSeries(["Afghanistan", "Albania", "Algeria"]).then(&nbsp; console.log);<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>