React中如何使用URL的ID参数作为数组filter的动态过滤条件

你的代码无法实现预期过滤效果，核心是两个问题：

• 对象属性访问方式错误：你写的item.itemsearch用了点语法，JS会直接找item上名为itemsearch的固定属性，不会读取itemsearch变量中存储的动态属性名（比如itemColorBlack/itemColorWhite），永远拿不到对应的值
• 存在基础语法错误：filter方法的回调括号闭合位置错误、JSX传递item属性时未用花括号包裹变量、数组中的title字符串值未加引号

// 原始列表数据：字符串类型的title值需要包裹引号
const allItems = [
  {
    title: 'item1',
    itemColorBlack: 1,
    itemColorWhite: 0
  },
  {
    title: 'item2',
    itemColorBlack: 0,
    itemColorWhite: 1
  }
]

// 提前从路由参数中取出要过滤的属性名，无需在每次遍历循环中重复读取
const filterAttr = props.match.params.id;

const itemlist = allItems
  .filter(function (item) {
    // 用方括号语法访问动态属性：方括号内会先读取变量值，再用该值作为属性名匹配
    return item[filterAttr] === 1
  })
  .map((item) => {
    // JSX传递变量类型props必须用花括号包裹
    return <ItemContainer item={item} />
  })

JS访问对象属性分两种语法，适用场景完全不同：

• 点语法obj.xxx：仅适合访问固定名称的属性，点后面的内容会被直接识别为属性名字符串，不会解析变量
• 方括号语法obj[xxx]：支持传入变量、表达式，会先计算括号内的运行结果，再用结果作为属性名查找对应值，是动态属性访问的标准写法

如果需要做容错处理，避免路由参数传入不存在的属性名导致过滤异常，可以给过滤逻辑加一层属性存在性判断：

.filter(function (item) {
  return Object.prototype.hasOwnProperty.call(item, filterAttr) && item[filterAttr] === 1
})

内容的提问来源于stack exchange，提问作者Filip Koed Nymann