如何读取JSON对象所有键值并添加至State？获取属性值数组

问题拆解 #

你已经成功把ParametricList_Filter_Attributes存入组件状态filterAttributes了，但在map操作时打印attr显示[object Object]——这是因为filterAttributes里的每一项都是键值对对象，直接打印对象就会得到这个默认输出。我们需要提取这些对象里的所有值，组成一个干净的一维数组。

解决方案 #

核心思路是先获取单个对象的所有值，再把多个对象的值数组合并起来，这里给你几种实用的实现方式：

方法1：用flatMap（简洁推荐）

const filterAttrs = this.state.filterAttributes.flatMap(attr => Object.values(attr));

• Object.values(attr)会把单个对象（比如{ "PartNumber": "Part Number", "ProductLine": "Product Line" }）转换成值数组["Part Number", "Product Line"]
• flatMap会自动把多个这样的数组合并成一个一维数组，最终结果就是["Part Number", "Product Line"]

方法2：用map + flat（兼容旧环境）

如果你的运行环境不支持flatMap，可以用这个组合替代：

const filterAttrs = this.state.filterAttributes.map(attr => Object.values(attr)).flat();

方法3：用reduce（兼容性拉满）

const filterAttrs = this.state.filterAttributes.reduce((result, currentAttr) => {
  // 把当前对象的值数组合并到结果数组中
  return result.concat(Object.values(currentAttr));
}, []); // 初始值设为空数组

结果验证 #

用你的测试数据运行上述代码后，filterAttrs会得到：

["Part Number", "Product Line"]

另外提一句：你之前的map代码没有返回值，所以filterAttrs会是[undefined]，现在的代码就能正确生成包含所有值的数组啦~

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