ReactJS中使用map遍历对象出现TypeError: Cannot read property 'map' of undefined错误

我来帮你搞定这个问题！你遇到的TypeError: Cannot read property 'map' of undefined主要有几个明确的原因，咱们一步步来修复：

问题根源拆解 #

1. 初始State未设置默认值：你初始化data时用了useState()，这会让组件第一次渲染时data是undefined，此时调用map必然报错。
2. 错误遍历对象而非数组：API返回的结构里，geonames才是包含所有地点数据的数组，你直接对整个data对象调用map——而对象本身并没有map方法。
3. 属性访问路径错误：就算遍历对了数组，你写的geo.geonames.name也是错的，geo已经是geonames里的单个元素，直接访问geo.name这类字段即可。

修复后的完整代码 #

import react, { useState, useEffect } from "react";
import TextFieldAPI from "./TextFieldAPI";
import ButtonAPI from "./ButtonAPI";
import Card from "@material-ui/core/Card";
import Button from "@material-ui/core/Button";
import SearchIcon from "@material-ui/icons/Search";

const url = "http://api.geonames.org/searchJSON?username=weknowit";

function FetchGeoAPI() {
  // 1. 给State设置默认值，确保geonames初始是一个空数组
  const [data, setData] = useState({ geonames: [] });
  
  const getData = () => {
    fetch(url)
      .then((response) => response.json())
      .then((json) => {
        console.log(json);
        setData(json);
      })
      // 增加错误捕获，避免请求失败时页面崩溃
      .catch(err => console.error('API请求失败:', err));
  };

  useEffect(() => {
    getData();
  }, []);

  return (
    <div>
      {/* 2. 遍历geonames数组，用可选链做安全防护 */}
      {data?.geonames
        // 3. 过滤出城市/村落类型的地点（fcl为P对应城市类）
        .filter(geo => geo.fcl === 'P')
        .map((geo) => (
          // 4. 给每个列表项加唯一key，用geonameId最稳妥
          <div key={geo.geonameId}>
            <h5>国家：{geo.countryName}</h5>
            <h5>城市：{geo.name}</h5>
            <h5>人口：{geo.population}</h5>
            <hr />
          </div>
        ))}
    </div>
  );
}

export default FetchGeoAPI;

关键修改说明 #

• 初始State默认值：useState({ geonames: [] })保证组件首次渲染时data.geonames是合法的空数组，不会触发map报错。
• 正确遍历数组：data?.geonames.map(...)里的可选链?.是额外的安全层，就算data还未加载完成，也不会抛出错误。
• 筛选城市数据：filter(geo => geo.fcl === 'P')帮你只保留城市/村落类的地点，完全符合你“仅显示城市”的需求。
• 属性访问修正：直接通过geo.countryName、geo.population获取目标字段，路径正确。
• 添加唯一key：React列表渲染要求每个项有唯一标识，用API返回的geonameId是最可靠的选择。

内容的提问来源于stack exchange，提问作者user16788910