React待办列表按按钮点击实现分类过滤功能问题求助

问题根源及修复步骤： #

1. 过滤函数引用错误
   你当前通过filterNames[filter]获取过滤逻辑，但filterNames只是存储分类名称的数组，真正的过滤函数在filterMap对象中。修改过滤逻辑的调用方式：
   原错误代码：

   const taskList = tasks
     .filter((filterNames[filter]))
     .map((task)=>(
       <Todo
         id={task.id}
         name={task.name}
         completed={task.completed}
         key={task.id}
         toggleTaskCompleted={toggleTaskCompleted}
         deleteTask={deleteTask}
         editTask={editTask}
       />
     ));
   

   修复后：

   const taskList = tasks
     .filter(filterMap[filter])
     .map((task)=>(
       <Todo
         id={task.id}
         name={task.name}
         completed={task.completed}
         key={task.id}
         toggleTaskCompleted={toggleTaskCompleted}
         deleteTask={deleteTask}
         editTask={editTask}
       />
     ));
   

2. Filter状态大小写不匹配
   初始filter状态设置为全大写的'ALL'，但filterMap的键是首字母大写的'All'，导致初始状态无法匹配正确的过滤函数，同时点击按钮后传入的分类名称是首字母大写格式，和初始状态不统一。修改初始状态：
   原错误代码：

   const [filter, setFilter] = useState('ALL');
   

   修复后：

   const [filter, setFilter] = useState('All');
   

可选优化（符合常规待办逻辑） #

当前新增任务默认标记为已完成（completed: true），通常待办项新增应为未完成状态，可修改addTask函数：

function addTask(name) {
  const newTask = { id: `todo-${nanoid()}`, name, completed: false };
  setTasks([...tasks, newTask]);
}

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