基于状态修改数组调用：动态过滤数组分组的实现疑问

嘿，这个坑我之前踩过！你用items.{this.state.filtergroup}这种写法肯定行不通，因为JavaScript的点操作符要求后面必须是固定的属性名称，没办法直接解析变量。要实现动态访问对象属性，得用方括号语法才行。

正确的写法示例 #

把点语法替换成方括号，就能让this.state.filtergroup的值作为属性名来访问了：

{this.state.data
  // 这里用方括号代替点语法，动态获取属性
  .filter(item => item[this.state.filtergroup] === this.state.filter)
  // map的时候记得加唯一key，还有正确的参数格式
  .map((filteredItem, index) => (
    // 这里替换成你实际要渲染的内容
    <div key={index}>
      {filteredItem.name}: {filteredItem[this.state.filtergroup]}
    </div>
  ))
}

为什么方括号能生效？ #

JavaScript里，对象的属性访问有两种方式：

• 点语法：obj.propertyName → 只能用固定的属性名，适合你明确知道属性名的情况
• 方括号语法：obj[expression] → 里面可以放变量、字符串或者任何能计算出属性名的表达式，完美适配你这种动态属性的场景

额外的小提示 #

为了避免出现undefined导致的错误，最好先确保this.state.filtergroup对应的属性在每个数组项里都存在，或者加个简单的判断：

.filter(item => {
  const value = item[this.state.filtergroup];
  // 先检查属性存在，再做判断
  return value !== undefined && value === this.state.filter;
})

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