Next.js 13客户端组件中如何映射传入的tasks属性？

问题根源 #

你的客户端组件无法正常映射tasks主要有两个核心问题：

1. 未正确解构组件Props
   React组件的参数是一个包含所有传入属性的对象，你直接将tasks作为参数接收，此时tasks实际上是整个props对象，而非传入的tasks数组，调用map自然会失败。

2. 未正确访问循环中的task属性
   在map回调中直接使用_id、title等变量，这些变量并未定义，需要从当前循环的task对象中获取。

修正后的代码 #

1. 修复TaskList客户端组件 #

"use client"
// 导入你的Task组件等依赖

export default function TaskList({ tasks }) {
  return (
    <ul>
      {/* 使用可选链?.避免tasks为undefined/null时的报错 */}
      {tasks?.map(({ _id, title, body }) => (
        <Task key={_id} id={_id} title={title} body={body} />
      ))}
    </ul>
  )
}

如果不习惯解构task对象，也可以直接通过task.xxx访问属性：

"use client"
// 导入你的Task组件等依赖

export default function TaskList({ tasks }) {
  return (
    <ul>
      {tasks?.map((task) => (
        <Task 
          key={task._id} 
          id={task._id} 
          title={task.title} 
          body={task.body} 
        />
      ))}
    </ul>
  )
}

2. 修正父组件（服务端组件）的调用方式 #

确保在原服务端组件中正确将tasks属性传递给TaskList：

const Tasks = async () => {
  const { tasks } = await getAllTasks()
  
  return (
    <section>
      <ul className="flex flex-col mx-3">
        <TaskList tasks={tasks} />
      </ul>
    </section>
  )
}

export default Tasks

3. 移除Task组件内的重复Key #

Task组件中的<li>不需要再添加key，因为你已经在TaskList的map循环中给<Task>组件设置了key，重复设置key会导致React警告：

export default function Task({ id, title, body }: TaskProps) {
  async function deleteTask() {
    await removeTask(title);
  }
  return (
    <li>
      <div className="flex justify-between" >
        <h1 className='font-bold'>{title}</h1>
        <span 
          className="material-icons hover:cursor-pointer text-skin-dark" 
          onClick={deleteTask}
        >delete</span>
      </div>
      <a className="mr-12" >{body}</a>
    </li>
  );
}

额外说明 #

• 保留tasks?.map的写法可以有效避免当tasks为undefined或null时的报错，比tasks && tasks.map更简洁安全。
• 如果你需要在客户端组件中使用useEffect，现在的修正不会影响这个需求，组件依然可以正常添加副作用逻辑。

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