React中能否在map函数中传props？遇map读取报错求解决

先定位问题根源 #

先在组件里加两行日志，搞清楚props.category的实际值和对应的JSON数据情况：

console.log('当前category:', props.category);
console.log('对应JSON数据:', cardsData[props.category]);

这行代码能帮你快速确认：是props.category传错了，还是组件初始化时这个值还没到位，或者JSON里根本没有对应的键。

针对性修复方案 #

1. 检查props.category的取值合法性 #

如果日志显示props.category不是'featured'或'standard'，那就是父组件传值出错了——可能是拼写错误、大小写不匹配（比如传了'Featured'但JSON里是小写的'featured'），修正父组件的传值即可。

2. 处理初始值缺失的情况 #

如果组件刚渲染时props.category还没被赋值（比如父组件是异步拉取数据后才传这个prop），可以用可选链运算符先判断：

{cardsData[props.category]?.map(item => (
  // 你的卡片渲染逻辑
))}

或者用空数组兜底，避免报错：

{(cardsData[props.category] || []).map(item => (
  // 你的卡片渲染逻辑
))}

3. 给props设置默认值 #

给组件的category prop加个默认值，确保即使父组件没传值，也能拿到合法的键：

// 函数组件用默认参数的写法
function CardList({ category = 'featured' }) {
  // 组件逻辑
}

// 或者用defaultProps
function CardList(props) {
  // 组件逻辑
}
CardList.defaultProps = {
  category: 'featured'
};

4. 确认JSON数据结构 #

最后检查你的JSON文件结构是否正确，必须包含featured和standard两个数组键，比如：

{
  "featured": [
    { "id": 1, "title": "精选卡片1" },
    { "id": 2, "title": "精选卡片2" }
  ],
  "standard": [
    { "id": 3, "title": "标准卡片1" },
    { "id": 4, "title": "标准卡片2" }
  ]
}

确保两个键都存在，且对应的值都是数组类型。

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