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

Question

有人能帮我解决这个错误吗？我正在尝试为国家名称创建一个下拉选择器，从以下 API 路径中提取：https ://api.covid19api.com/countriesTypeError: Country.map is not a functionat fetchCountries (index.js:29)at async fetchAPI (CountryPicker.jsx:13)这是我正在处理的两个代码部分：CountryPicker.jsximport 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.jsimport 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 axiosexport 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 的结果，是这样的形式：

[

    {"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...

]

所以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 () => {

  try {

    const countries = await axios

      .get(countriesURL)

      .then((x) => x.data);

    return countries.map(({ Country }) => Country);

  } catch (error) {

    console.log(error);

    return []

  }

};

const fetchCountries = async () => {

  try {

    const countries = await axios

      .get("https://api.covid19api.com/countries")

      .then((x) => x.data);

    return countries.map(({ Country }) => Country).sort();

  } catch (error) {

    console.log(error);

    return []

  }

};

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 js

const fetchCountriesInfoParallel = async (countries = []) => {

  const promises = countries.map((country) =>

    axios

      .get(`https://api.covid19api.com/live/country/${country}`)

      .then(({ data }) => data)

  );

  try {

    return await Promise.all(promises);

  } catch (error) {

    console.log(error);

    return [];

  }

};

fetchCountriesInfoParallel(["Afghanistan", "Albania", "Algeria"]).then(

  console.log

);

const fetchCountriesInfoSeries = async (countries = []) => {

  let results = [];

  for (let index = 0; index < countries.length; index++) {

    const country = countries[index];

    const data = await axios

      .get(`https://api.covid19api.com/live/country/${country}`)

      .then(({ data }) => data);

    results.push(data);

  }

  return results;

};

fetchCountriesInfoSeries(["Afghanistan", "Albania", "Algeria"]).then(

  console.log

);

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>