React待办列表筛选功能渲染时出现Uncaught TypeError报错求助

这个报错的核心原因是FILTER_MAP[filter]返回了undefined，而数组的filter方法要求必须传入一个函数类型的参数，因此触发类型错误。以下是具体排查和解决步骤：

1. 检查FILTER_MAP的定义是否正确 #

确保FILTER_MAP中每个键对应的都是筛选函数，比如正确的定义应该类似：

const FILTER_MAP = {
  All: (task) => true,
  Active: (task) => !task.completed,
  Completed: (task) => task.completed
};

如果某个键对应的值不是函数（比如字符串、undefined或者其他类型），就会导致FILTER_MAP[filter]拿到非函数值，触发报错。

2. 确认filter变量的取值匹配FILTER_MAP的键 #

检查你的filter变量当前值（比如通过console.log(filter)打印），确保它是FILTER_MAP中存在的键名。比如：

• 如果FILTER_MAP的键是"All"（首字母大写），但filter的值是"all"（小写），就会返回undefined
• 确保filter没有被意外赋值为null、undefined或者其他不存在的键

3. 添加兜底逻辑避免报错 #

如果无法保证filter一定匹配FILTER_MAP的键，可以在使用时添加兜底函数，避免报错：

.filter(FILTER_MAP[filter] || (() => true)) // 默认显示所有任务

修复后的完整代码示例 #

const FILTER_MAP = {
  All: (task) => true,
  Active: (task) => !task.completed,
  Completed: (task) => task.completed
};

// 假设你有一个tasks数组和filter变量
tasks
  .filter(FILTER_MAP[filter] || (() => true))
  .map((task) => (
    <Todo
      id={task.id}
      name={task.name}
      completed={task.completed}
      key={task.id}
      toggleTaskCompleted={toggleTaskCompleted}
      deleteTask={deleteTask}
      editTask={editTask}
    />
  ));

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