React报错Cannot read properties of undefined (reading 'map')

报错本质 #

调用.map()方法的目标值不是数组，是undefined。对应到你的代码，就是Tasks组件里执行tasks.map()时，拿到的tasks变量未定义。

具体修复步骤 #

• 给数组渲染逻辑加防御性判断，从根源避免非数组值调用map的报错。修改Tasks.js代码如下：

import React from 'react'
import Task from './Task'

const Tasks = ({tasks}) => {
  return (
    <>
    {Array.isArray(tasks) && tasks.map((task) => (
      <Task key={task.id} task={task} />
    ))}
    </>
  )
}

export default Tasks

• 全局排查所有渲染<Tasks />组件的位置（包括Navbar等嵌套组件里的隐式引用），确保每一处使用Tasks组件时都传入了tasks属性，写法为<Tasks tasks={tasks} />。只要有一处漏传props，组件解构得到的tasks就是undefined，直接触发报错。
• 校验所有组件的导入导出写法，避免默认导入/命名导入混写导致的组件引用错误：
  • Tasks.js使用默认导出（export default Tasks），导入时不能加花括号，保持App.js里现有import Tasks from './components/Tasks'的写法即可
  • Task.js同时存在命名导出和默认导出，保持Tasks.js里现有import Task from './Task'的默认导入写法即可，不要随意添加花括号
• 重启开发服务+浏览器硬刷新清除缓存。你遇到的“错误未在控制台显示”基本是React开发环境热更新缓存导致的，停掉当前运行的项目服务重新启动，浏览器按Ctrl+F5（Windows）/Command+Shift+R（Mac）硬刷新即可看到正常的控制台输出。

验证方式 #

修改完成后在Tasks组件第一行加console.log('tasks值：', tasks)，如果控制台能正常打印出你在App.js中定义的长度为3的任务数组，页面就能正常渲染所有任务项。

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