英文:
How to map prop passed to client component in NEXT 13?
问题
Here's the translated code part you requested:
我对下面这个13个应用程序目录还很陌生，当我像这样在服务器组件中映射时它能正常工作：
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
尽管当我尝试将此代码提取到客户端组件中（以便我可以使用 useEffect）时，我无法映射传递的 'tasks' 属性
"use client"
//我的导入在这里
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>
);
}
Please note that I've retained the original structure and formatting of the code while providing the translation.
英文:
I'm new to the next 13 APP directory and it works when I map in the server component like this:
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
Though when I try to extract this code into a client component (so that I can useEffect), I'm unable to map the passed 'tasks' prop
"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>
);
}
I've tried a conditional return for the tasks prop 'tasks && ( JSX )'
Also tried putting the list item tags around Task, inside Tasks
Appreciate any assistance 
答案1
得分: 1
你是如何将 tasks 传递到客户端组件中的？还看起来你可能忘记了解构客户端组件的 props。你写了
"use client";
// 这里是我的导入
export default function TaskList(tasks) {
return (
<ul>
{tasks.map((task) => (
<Task key={_id} id={_id} title={title} body={body} />
))}
</ul>
);
}
但 tasks 应该是对象的属性，像这样：
"use client";
// 这里是我的导入
export default function TaskList({ tasks }) {
return (
<ul>
{tasks.map((task) => (
<Task key={_id} id={_id} title={title} body={body} />
))}
</ul>
);
}
英文:
How are you passing tasks into your client component from your server component? It also looks like you might have forgotten to destructure your client component's props. You wrote
"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>
);
}
but tasks should be a property on an object, like this:
"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>
);
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论