时间戳

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

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

问题描述

有人能帮我解决这个错误吗？我正在尝试为国家名称创建一个下拉选择器，从以下 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...
]

标签： javascriptreactjs

解决方案

查看调用 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);

推荐阅读