React渲染电视剧卡片报Cannot read properties of undefined (reading 'map')错误怎么办

错误原因 #

你的报错是因为在TvList组件中调用map方法的props.tvshows为undefined，非数组类型没有map方法，所以触发类型错误。
出现该问题常见两个诱因：

• 父组件传递tvshows时存在异步加载的情况，首次渲染时数据还未完成赋值
• 组件导入路径错误导致传值链路断裂

修复方案 #

1. 给TvList增加空值兜底逻辑 #

直接修改tvList.js代码，确保调用map的对象一定是数组：

import React from "react";
import Tv from "../tvCard/";
import Grid from "@material-ui/core/Grid";

const TvList = (props) => {
  // 兜底为空白数组，避免undefined调用map报错
  let tvCards = (props.tvshows ?? []).map((m) => (
    <Grid key={m.id} item xs={12} sm={6} md={4} lg={3} xl={2}>
      <Tv tv={m} />
    </Grid>
  ));
  return tvCards;
};

export default TvList;

注：你已经在Grid上绑定了key，Tv组件不需要重复绑定相同的key值，可直接去掉。

2. 检查组件导入路径 #

确认tvCard组件的导入路径是否正确：如果你的tvCard组件文件路径为../tvCard/tvCard.js，那么导入语句需要补全文件名，改为：
import Tv from "../tvCard/tvCard";
如果你的tvCard文件夹下有index.js做了中转导出，保持原有路径即可。

修复完成后，你在index.js中构造的7个重复样本数组会正确传递到组件，所有卡片都会渲染同一份电视剧数据，满足你的测试需求。

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