Next.js 13 服务端组件向客户端组件传递数据并正确渲染列表

// app/tasks/page.tsx (Server Component)
// 这是一个服务端组件，默认无需 "use client" 指令

import { getAllTasks } from '@/lib/api'; // 假设这是一个获取任务的函数
import TaskList from './TaskList'; // 导入客户端组件

interface TaskProps {
  _id: string;
  title: string;
  body: string;
}

const Tasks = async () => {
  // 在服务端获取数据
  const { tasks }: { tasks: TaskProps[] } = await getAllTasks();

  return (
    <section>
      <h2 className="text-2xl font-bold mb-4">我的任务</h2>
      {/* 将获取到的 tasks 数组作为 prop 传递给客户端组件 TaskList */}
      <TaskList tasks={tasks} /> 
    </section>
  );
};

export default Tasks;

// app/tasks/TaskList.tsx (Client Component - 错误示例)
"use client";

import Task from './Task'; // 导入 Task 单个任务组件

export default function TaskList(tasks) { // 错误：tasks 实际上是 props 对象本身
  return (
    <ul className="flex flex-col mx-3">
      {/* 这里的 tasks 并非预期的数组，而是整个 props 对象，因此 map 会失败 */}
      {tasks.map((task) => ( 
        <Task key={task._id} id={task._id} title={task.title} body={task.body} />
      ))}
    </ul>
  );
}

// app/tasks/TaskList.tsx (Client Component - 正确示例)
"use client"; // 标记为客户端组件

import Task from './Task'; // 导入 Task 单个任务组件

interface TaskProps {
  _id: string;
  title: string;
  body: string;
}

interface TaskListProps {
  tasks: TaskProps[]; // 定义 tasks 属性的类型
}

export default function TaskList({ tasks }: TaskListProps) { // 正确：解构出 tasks 数组
  if (!tasks || tasks.length === 0) {
    return <p className="text-gray-500">暂无任务。</p>;
  }

  return (
    <ul className="flex flex-col mx-3 gap-2">
      {/* 现在 tasks 是一个数组，可以正确地使用 map 方法 */}
      {tasks.map((task) => (
        <Task key={task._id} id={task._id} title={task.title} body={task.body} />
      ))}
    </ul>
  );
}

// app/tasks/Task.tsx (Client Component)
"use client"; // 标记为客户端组件

import { removeTask } from '@/lib/api'; // 假设这是一个删除任务的函数

interface TaskProps {
  id: string;
  title: string;
  body: string;
}

export default function Task({ id, title, body }: TaskProps) {
  async function deleteTask() {
    // 实际应用中，这里可能需要用户确认或刷新列表
    try {
      await removeTask(id); // 使用任务ID删除
      alert('任务删除成功！');
      // 可以考虑在此处触发数据重新获取或局部更新UI
    } catch (error) {
      console.error('删除任务失败:', error);
      alert('删除任务失败，请重试。');
    }
  }

  return (
    <li key={id} className="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
      <div className="flex justify-between items-center mb-2">
        <h3 className='font-bold text-lg text-gray-800'>{title}</h3>
        <span 
          className="material-icons text-red-500 hover:text-red-700 cursor-pointer transition-colors duration-200" 
          onClick={deleteTask}
          title="删除任务"
        >delete</span>
      </div>
      <p className="text-gray-600 text-sm">{body}</p>
    </li>
  );
}