如何用React函数式组件实现TodoList？数据传递与渲染问题求助

问题修复步骤 #

1. 修正数据传递（items.jsx）

你在Items组件里给List传递的是组件本身List，这是错误的，应该把状态中的tasks数组传过去：

// 原代码
<List data = {List}/>
// 修改后
<List tasks={tasks}/>

2. 修正List组件的props接收与渲染逻辑（list.jsx）

List组件的参数是props对象，不是直接的tasks数组，且你没有正确调用map方法渲染列表项：

// 原代码
const List = (tasks) => {
    return(
        <div>
            {tasks.map}
        </div>
    )
    console.log(task.map)
}
// 修改后
import React from "react";
import Button from "./button"

const List = ({ tasks }) => {
    console.log(tasks); // 移到return前才能执行
    return(
        <div className="task-list">
            {tasks.map(task => (
                // 每个列表项必须有唯一key，用task.id保证唯一性
                <div key={task.id} className="task-item">
                    <span>{task.name}</span>
                    {/* 可按需添加导入的Button组件，比如删除按钮 */}
                    <Button>删除</Button>
                </div>
            ))}
        </div>
    )
}
export default List

额外优化建议

• 日期输入框未绑定状态，若要给任务添加日期属性，需新增状态并绑定：比如const [date, setDate] = useState("")，再给输入框加上value={date}和onChange={(e) => setDate(e.target.value)}。
• 提交按钮可替换为你导入的Button组件，保持组件拆分的一致性：<Button onClick={onAddTask}>Submit task</Button>

修改完成后，新增的任务就能正确渲染在表单下方，数据也能正常传递到List组件中。

内容的提问来源于stack exchange，提问作者Bruno Stojaković