React中动态变量无法通过对象括号符号访问FILTER_M的问题

问题场景 #

尝试通过动态变量filter访问FILTER_M对象中的过滤函数时持续报错，但直接使用FILTER_M.ALL这类硬编码属性名或直接传入过滤函数（如(order) => !order.completed）时可正常运行。需求是默认显示全部订单，并能动态切换显示活跃、已完成订单。

核心问题 #

代码里存在大小写不匹配的问题：

• FILTER_M对象的键是ALL（全大写）
• 但useState的初始值是'All'（首字母大写）

执行FILTER_M[filter]时，filter的值是'All'，而FILTER_M里没有这个键，会返回undefined，而Array.filter()要求传入一个函数，因此触发报错。

解决方案 #

有两种简单的修复方式：

方式一：统一键名与状态值的大小写

把FILTER_M中的ALL改为All，和状态初始值保持一致：

const FILTER_M = {
  All: () => true, // 改为首字母大写
  Active: (order) => !order.completed,
  Completed: (order) => order.completed
};

同时确保FilterButton组件传递的cname和状态值匹配，这样cname === filter的判断也能正常工作。

方式二：添加容错处理

如果不想修改键名，可以在调用filter方法时添加默认 fallback，避免找不到函数的情况：

const orderList = orders
  .filter(FILTER_M[filter] || FILTER_M.ALL) // 找不到时默认用ALL的过滤函数
  .map((order) => (
    <MyOrder
      item={order.item}
      quantity={order.quantity}
      cname={order.cname}
      id={order.id}
      completed={order.completed}
      key={order.id}
    />
))

同时记得把useState的初始值改为'ALL'（全大写），和FILTER_M的键保持一致：

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

额外注意 #

要确保FilterButton组件在点击时传递给setFilter的参数是FILTER_NAMES里的键（也就是FILTER_M的键），这样状态值才会和对象键完全匹配。

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