React项目出现Uncaught TypeError错误，请求排查与修复

这个Cannot read properties of undefined (reading 'map')报错的核心是：你调用map()方法的变量是undefined，并非合法数组。常见触发场景：

• 传递给AccommodationList的住宿数据未定义，或未正确传入组件
• 数据初始化时未给数组设置默认值（比如state初始值为undefined而非空数组）
• 异步加载数据时，组件先完成渲染，此时数据尚未返回，数组处于undefined状态

1. 确保数据正确初始化与传递 #

在App.js中，先确认渲染列表用的住宿数据是已初始化的数组：

// 静态数据直接初始化
const accommodations = [
  { id: 1, name: "山景民宿", price: 260 },
  { id: 2, name: "海滨公寓", price: 320 },
  { id: 3, name: "城市酒店", price: 180 },
  { id: 4, name: "乡村小屋", price: 220 }
];

// 若为异步请求数据，给state设置空数组默认值
const [accommodations, setAccommodations] = useState([]);

同时确认给AccommodationList组件传对了props：

<AccommodationList accommodations={accommodations} />

2. 在列表组件中做防御性处理 #

在AccommodationList.js中，调用map()前先判断数组合法性，或给props设置默认空数组：

方式一：给组件props设默认值

// 定义组件时直接给accommodations设置默认空数组
function AccommodationList({ accommodations = [] }) {
  return (
    <div className="list-container">
      {accommodations.map(item => (
        <div key={item.id} className="accommodation-item">
          {/* 用react-router-dom的Link跳转详情页 */}
          <Link to={`/details/${item.id}`}>
            <h3>{item.name}</h3>
            <p>价格：¥{item.price}/晚</p>
          </Link>
        </div>
      ))}
    </div>
  );
}

方式二：渲染前加存在性判断

// 确保数组存在再调用map
{accommodations && accommodations.map(item => (
  // 渲染住宿项内容
))}

// 或用可选链简化写法
{accommodations?.map(item => (
  // 渲染住宿项内容
))}

3. 路由与详情页的配套处理 #

在App.js中确认路由配置正确，详情页能接收id参数：

import { Routes, Route } from 'react-router-dom';
import AccommodationList from './AccommodationList';
import AccommodationDetails from './AccommodationDetails';

function App() {
  const accommodations = [/* 你的4条住宿数据 */];
  return (
    <Routes>
      <Route path="/" element={<AccommodationList accommodations={accommodations} />} />
      <Route path="/details/:id" element={<AccommodationDetails accommodations={accommodations} />} />
    </Routes>
  );
}

在AccommodationDetails.js中，处理找不到对应住宿的情况：

import { useParams } from 'react-router-dom';

function AccommodationDetails({ accommodations }) {
  const { id } = useParams();
  // 将路由参数id转为数字，匹配数据中的id
  const targetAccom = accommodations.find(item => item.id === parseInt(id));

  // 找不到对应住宿时返回提示
  if (!targetAccom) {
    return <div>未找到该住宿信息</div>;
  }

  return (
    <div className="details-container">
      <h1>{targetAccom.name}</h1>
      <p>价格：¥{targetAccom.price}/晚</p>
      {/* 其他详情内容 */}
    </div>
  );
}

1. 打开浏览器控制台，查看报错的具体行号，直接定位到出问题的map()调用
2. 在出问题的组件中用console.log(accommodations)打印数据，确认是否为undefined
3. 检查组件的props传递路径，确保数据从App到列表组件没有断链

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