我是第一次使用下一个13 APP目录，当我在服务器组件中Map时，它可以工作，如下所示：

const Tasks = async () => {
  const { tasks } = await getAllTasks()
  
  return (
    <section>
      <ul className="flex flex-col mx-3">
        {tasks?.map(({_id, title, body}: TaskProps) => (
          <Task key={_id} id={_id} title={title} body={body} />
        ))}
      </ul>
    </section>
  )
}

export default Tasks

尽管当我尝试将此代码提取到客户端组件中（以便可以使用Effect）时，我无法Map传递的“tasks”属性

"use client"
//my imports here

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

Task.tsx:

export default function Task({ id, title, body }: TaskProps) {
  async function deleteTask() {
    await removeTask(title);
  }
  return (
    <li key={id}>
      <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 prop 'tasks &&（JSX）'的条件返回，还尝试了在Tasks内部的Task周围放置列表项标记
感谢任何帮助：）