Reactjs 我不断地得到一个错误：“quot；类型错误：countries.map不是函数；

我一直在

TypeError:countries.map不是函数

我不知道为什么。当我使用注释掉

并使用

console.log（tableData）

时，它会显示正确的国家/地区数组，但是当我包含

时，我不会得到数组

任何帮助都将不胜感激

import React, {useState, useEffect} from 'react';
import {
  MenuItem,
  FormControl,
  Select,
  Card,
  CardContent
} from "@material-ui/core";
import InfoBox from "./InfoBox";
import Map from "./Map";
import './App.css';
import Table from "./Table";

function App() {
  const [countries, setCountries] = useState([]);
  const [country, setCountry] = useState(["worldwide"]);
  const [countryInfo, setCountryInfo] = useState({});
  const [tableData, setTableData] = useState({});

  useEffect(() => {
    fetch('https://disease.sh/v3/covid-19/all')
      .then(response => response.json())
      .then((data) => {
        setCountryInfo(data);
      })
  }, []);

  useEffect(() => {
    const getCountriesData = async () => {
      await fetch("https://disease.sh/v3/covid-19/countries")
        .then((response) => response.json())
        .then((data) => {
          const countries = data.map((country) => (
            {
              name: country.country,
              value: country.countryInfo.iso2
            }
          ));

        setTableData(data);
        setCountries(countries);
      });
    };

    getCountriesData();
  }, []);

  const onCountryChange = async (event) => {
    const countryCode = event.target.value;

    const url = countryCode === 'worldwide' ? 'https://disease.sh/v3/covid-19/all' : `https://disease.sh/v3/covid-19/countries/${countryCode}`;

    await fetch(url)
      .then(response => response.json())
      .then(data => {
        setCountry(countryCode);

        //All data from country
        setCountryInfo(data);
      })
  };

  console.log('COUNTRY INFO >>>', countryInfo);

  return (
    <div className="app">
      <div className="app__left">
        <div className="app__header">
        <h1>COVID-19 STATS</h1>
          <FormControl className="app__dropdown">
            <Select variant="outlined" onChange={onCountryChange} value={country}>
              <MenuItem value="worldwide">Worldwide</MenuItem>
              {
                countries.map((country) => (
                  <MenuItem value={country.value}>{country.name}</MenuItem>
                ))
              }
            </Select>
          </FormControl>
        </div>

        <div className="app__stats">
          <InfoBox title="COVID-19 Cases" cases={countryInfo.todayCases} total={countryInfo.cases} />

          <InfoBox title="Recovered" cases={countryInfo.todayRecovered} total={countryInfo.recovered}/>

          <InfoBox title="Deaths" cases={countryInfo.todayDeaths} total={countryInfo.deaths} />
        </div>

        <Map />
      </div>
      <Card className="app__right">
        <CardContent>
          <h3>Live cases per country</h3>
          {console.log(tableData)}
          <Table countries={tableData} />
          <h3>Worldwide new cases</h3>
        </CardContent>
      </Card>
    </div>
  );
}

export default App;

import React，{useState，useffect}来自“React”；
进口{
MenuItem，
FormControl，
选择，
卡片
卡片内容
}来自“@材料界面/核心”；
从“/InfoBox”导入InfoBox；
从“/Map”导入地图；
导入“/App.css”；
从“/Table”导入表；
函数App（）{
const[countries，setCountries]=useState（[]）；
const[country，setCountry]=useState（[“worldwide”]）；
const[countryInfo，setCountryInfo]=useState（{}）；
const[tableData，setTableData]=useState（{}）；
useffect（（）=>{
取（'https://disease.sh/v3/covid-19/all')
.then（response=>response.json（））
。然后（（数据）=>{
setCountryInfo（数据）；
})
}, []);
useffect（（）=>{
const getCountriesData=async（）=>{
等待取回（“https://disease.sh/v3/covid-19/countries")
.then（（response）=>response.json（））
。然后（（数据）=>{
const countries=data.map（（国家）=>(
{
姓名：country.country，
值：country.countryInfo.iso2
}
));
可设置数据（数据）；
国家（国家）；
});
};
getCountriesData（）；
}, []);
const onCountryChange=异步（事件）=>{
const countryCode=event.target.value；
const url=countryCode==‘全球’？'https://disease.sh/v3/covid-19/all' : `https://disease.sh/v3/covid-19/countries/${countryCode}`；
等待获取（url）
.then（response=>response.json（））
。然后（数据=>{
setCountry（countryCode）；
//所有数据来自国家/地区
setCountryInfo（数据）；
})
};
console.log（'COUNTRY INFO>>'，countryInfo）；
返回(
新冠病毒-19统计数据
在全世界
{
国家地图（（国家）=>(
{country.name}
))
}
每个国家的活病例
{console.log（tableData）}
全球新病例
);
}
导出默认应用程序；

以下是Table.js文件：

import React from 'react'

function Table({ countries }) {
    return <div className="table">
        {countries.map(({ country, cases }) => (
            <tr>
                <td>{country}</td>
                <td>{cases}</td>
            </tr>
        ))}
    </div>
}

export default Table

从“React”导入React
函数表（{countries}）{
返回
{countries.map（{country，cases}）=>(
{国家}
{案例}
))}
}
导出默认表

看起来像

const[tableData，setTableData]=useState（{}），您正在将
tableData
设置为对象。
此外，API结果中的数据是对象，并且是
tableData
，再次被设置为对象
setTableData（数据）

使用
组件
时，tableData
是一个对象而不是数组。
您还可以添加检查是否存在国家/地区

countries && countries.map(({ country, cases }) => {}

看起来您的API（）返回的是一个对象，而不是一个数组，但它是否只返回什么disease.sh/v3/covid-19/countries？据我所知，disease.sh/v3/covid-19/all未连接到表，这就是导致错误的原因。哦，是的，我的错，我混淆了你的两个状态（可能是因为你将其作为国家属性添加到表组件中），看起来可能有答案是这样的。当我记录它的时候，我想我没有意识到它是一个物体内部的数组。好眼力！为了明确OP，您只需将
tableData
行中的
useState（{}）
更改为
useState（[]）
。在CodeSandbox中工作：我不敢相信它会这么简单。。。我很感激，伙计！
Check the sort function used you must have returned something wrong
export const sortData = (data) => {
  const sortedData = [...data]; //copy the data to sortedData
  sortedData.sort((a, b) => {
    if (a.cases > b.cases) {
      return -1;
    } else {
      return 1;
    }
  });
  return sortedData;
};