NextJS 13.3.0遍历tasks数组报错：tasks.map不是函数

核心原因 #

你的TodoList组件接收参数时犯了一个常见错误：React组件的第一个参数是整个props对象，而非直接传入的某个属性。当前代码里的(tasks)其实是完整的props对象，不是你期望的ITask[]类型数组，所以调用tasks.map会报错——对象不存在map方法。

控制台打印的tasks实际是{ tasks: [你的任务数组] }的嵌套结构，只是你可能没注意到这层包裹关系。

修复方案 #

有两种简单的修复方式：

方式1：解构props，直接取出tasks属性 #

修改TodoList.tsx的组件定义：

import { ITask } from "../types"

interface TodoListProps {
    tasks : ITask[]
}

// 用解构语法从props中提取tasks数组
const TodoList : React.FC<TodoListProps> = ({ tasks }) => {
    console.log(tasks); // 现在打印的是真正的任务数组
  return (
    <div className="overflow-x-auto">
  <table className="table w-full">
    {/* head */}
    <thead>
      <tr>
        <th>Name</th>
        <th>Favorite Color</th>
      </tr>
    </thead>
    <tbody>
    {/* 正常调用map方法 */}
    {tasks.map((task : ITask)=>(
      <tr key={task.id} >
        <td>{task.text}</td>
        <td>Blue</td>
      </tr>
    ))}
    </tbody>
  </table>
</div>
  )
}

export default TodoList; // 补充导出语句，原代码遗漏了这部分

方式2：保留props参数，通过props.tasks访问数组 #

如果不想使用解构，也可以直接通过props对象访问目标属性：

import { ITask } from "../types"

interface TodoListProps {
    tasks : ITask[]
}

const TodoList : React.FC<TodoListProps> = (props) => {
    console.log(props.tasks);
  return (
    <div className="overflow-x-auto">
  <table className="table w-full">
    {/* ... 头部代码不变 */}
    <tbody>
    {props.tasks.map((task : ITask)=>(
      <tr key={task.id} >
        <td>{task.text}</td>
        <td>Blue</td>
      </tr>
    ))}
    </tbody>
  </table>
</div>
  )
}

export default TodoList;

额外注意 #

原TodoList.tsx代码遗漏了组件导出语句，必须加上export default TodoList;，否则page.tsx无法正确导入使用该组件。

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