类型错误:国家是未定义的 ReactJS covid19 应用程序

Question

我正在按照JavaScript Mastery的教程制作covid19跟踪器应用程序，并且我对TypeError有问题：国家未定义，

浏览器中显示的问题：

19 | return (
20 |   <FormControl className={styles.formControl}>
21 |     <NativeSelect defaultValue="" onChange={(e) => handleCountryChange(e.target.value)}>
> 22 |       <option value="">Global</option>
| ^  23 |       {countries.map((country, i) => <option key={i} value={country}>{country}</option>)}
24 |     </NativeSelect>
25 |   </FormControl>

//及以下获取API

10 | 
11 |  useEffect(() => {
12 |    const fetchAPI = async () => {
> 13 |      setCountries(await fetchCountries());
| ^  14 |    };
15 | 
16 |    fetchAPI();

CountryPicker.jsx 文件

import React, { useState, useEffect } from 'react';
import { NativeSelect, FormControl } from '@material-ui/core';
import { fetchCountries } from '../../api';
import styles from './CountryPicker.module.css';
const Countries = ({ handleCountryChange }) => {
const [countries, setCountries] = useState([]);
useEffect(() => {
const fetchAPI = async () => {
setCountries(await fetchCountries());
};
fetchAPI();
}, []);
return (
<FormControl className={styles.formControl}>
<NativeSelect defaultValue="" onChange={(e) => handleCountryChange(e.target.value)}>
<option value="">Global</option>
{countries.map((country, i) => <option key={i} value={country}>{country}</option>)}
</NativeSelect>
</FormControl>
);
};
export default Countries;

其余代码可以查看JavaScrip Master git https://github.com/adrianhajdin/project_corona_tracker/tree/master/src 我有相同的代码，但仍然不起作用，我也安装了所有必要的 npm 依赖项

Answer 1

将第23 行替换为

{(countries.length > 0) &&
countries.map((country, i) => <option key={i} value={country}>{country}</option>)
}