JS根据选中值筛选对象子项时调用filter报错如何解决

• list2是普通对象，不是数组，filter是数组实例方法，对象上不存在该方法，直接调用会触发类型错误。
• 回调函数内使用了赋值运算符=而非全等判断符===，即使数据类型正确逻辑也不成立。

list2本身就是以firstArr项的值为键、对应子数组为值的映射结构，不需要做遍历筛选，直接用选中的selectedValue作为键读取对应值即可，性能远高于遍历筛选。
完整联动代码如下：

import { useState } from 'react';

const firstArr = [
  {
    "code": "firstArr item 1",
    "name": "firstArr item 1"
  },
  {
    "code": "firstArr item 2",
    "name": "firstArr item 2"
  },
  {
    "code": "firstArr item 3",
    "name": "firstArr item 3"
  },
];

const list2 = {
  "firstArr item 1": [
      {
          "code": "firstArr Subitem 1",
          "name": "firstArr Subitem 1"
      }
  ],
  "firstArr item 2": [
      {
          "code": "firstArr Subitem 2",
          "name": "firstArr Subitem 2"
      }
  ],
  "firstArr item 3": [
      {
          "code": "firstArr Subitem 3",
          "name": "firstArr Subitem 3"
      }
  ],
};

function LinkageComponent() {
  // 存储一级选中值，可按需设置默认值
  const [selectedVal, setSelectedVal] = useState('firstArr item 1');
  // 读取选中值对应的二级子列表，兜底空数组避免渲染报错
  const currentSubList = list2[selectedVal] || [];

  return (
    <>
      <FirstComponent
        data={firstArr}
        onUpdate={val => {
          setSelectedVal(val);
        }}
      />
      {/* 传入二级组件渲染即可 */}
      <SecondComponent data={currentSubList} />
    </>
  );
}

如果后续遇到必须先把对象转数组再筛选的场景，可以用Object.entries先转换结构再操作：

// 对象转键值对数组后筛选的写法，当前场景不推荐，性能弱于直接按键取值
const targetList = Object.entries(list2)
  .filter(([key]) => key === 'firstArr item 1')[0]?.[1] || [];

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