React+TypeScript开发报错：Cannot read properties of undefined (reading 'map')求解决

你遇到的Cannot read properties of undefined (reading 'map')错误，是因为尝试对undefined值调用数组的map方法。从你的代码来看，问题出在data.map(...)这一行——组件初始渲染时、或者搜索请求还未返回结果时，state.repositories.data的初始值大概率是undefined，而非数组，这时调用map就会触发报错。

下面是几种可行的修复方案：

1. 给data设置默认空数组 #

方案A：解构时直接赋默认值 #

在从Redux状态中解构data时，给它设置一个空数组作为默认值，这样即使初始状态里data是undefined，也能保证渲染时data是数组类型：

const { data = [], error, loading } = useTypedSelector(
  (state) => state.repositories
);

方案B：在Redux reducer中初始化data为空数组 #

从根源上解决，在定义repositories的初始状态时，就把data设为空数组：

// 示例reducer代码
const initialState = {
  data: [],
  error: null,
  loading: false
};

function repositoriesReducer(state = initialState, action) {
  // ...你的reducer逻辑
}

2. 使用可选链操作符做安全判断 #

在调用map之前，用可选链?.判断data是否存在，只有当data不为undefined或null时才执行map：

{!error && !loading && data?.map((name) => <div key={name}>{name}</div>)}

3. TypeScript类型层面优化 #

为了避免类型推断错误，建议明确定义Redux状态的类型，确保data的类型清晰：

interface RepositoriesState {
  data: string[]; // 如果已经在reducer中初始化为空数组，直接设为string[]
  // 或者如果允许data为undefined，就写：data: string[] | undefined;
  error: string | null;
  loading: boolean;
}

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