如何修复TypeError: undefined is not an object (evaluating 'reminder.map')错误

错误原因 #

这个错误是因为你在reminder为undefined时调用了map方法——undefined不是数组，没有map属性，自然会触发报错。

具体修复方案 #

• 给组件参数设置默认空数组
  修改组件的参数解构，为reminder添加默认值，确保它始终是数组类型：

  const ComponentReminderList: React.FC<ReminderListProps> = ({ reminder = [] }) => {
  

  这样即使父组件未传递reminder或传递了undefined，reminder都会被初始化为空数组，map调用不会报错。

• 在map前添加安全校验
  使用可选链或类型判断，确保reminder存在且为数组时才执行map：
  可选链写法（简洁）：

  {reminder?.map((item, index) => (
  

  严谨类型判断写法：

  {Array.isArray(reminder) && reminder.map((item, index) => (
  

• 修正接口定义（可选）
  如果父组件可能不传递reminder，可以将接口中的reminder设为可选属性，配合默认值让类型检查更严谨：

  interface ReminderListProps {
    reminder?: ReminderDetails[];
  }
  

额外检查 #

确认父组件传递reminder的逻辑：如果是异步加载数据（比如从API获取），父组件的初始状态是否设为undefined？如果是，把初始状态改成[]也能从根源避免这个问题。

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