ReactJS 如何按所需条件过滤数组？

大家好！我正在尝试在项目中实现一个简单的搜索功能。项目 - 属性列表。我有一个包含这些元素的数组：

const selectedAttributesArray = [
{
attrType: "ЭЛЕМЕНТ",
code: "Teen",
id: 162,
links: [],
note: "string",
type: "protegrity",
},
{
attrType: "ЭЛЕМЕНТ",
code: "DE_unicode1",
id: 141,
links: [ 
{idElementConnect: 162, 
protectionFunc: 'DE1_string', 
unprotectionFunc: 'DE2_string', 
codeElementConnect: 'IK_HIVE'
},
],
note: "string",
type: "protegrity",
},
{
attrType: "ЭЛЕМЕНТ",
code: "R1_to_de",
id: 81,
links: [ 
{idElementConnect: 182, 
protectionFunc: 'ptyProtectStr', 
unprotectionFunc: 'ptyUnprotectStr', 
codeElementConnect: 'HIVE'}, 
{idElementConnect: null, 
protectionFunc: 'FUNCTION_FOR', 
unprotectionFunc: null, 
codeElementConnect: null}, 
{idElementConnect: 201, 
protectionFunc: 'ptyProtectStr', 
unprotectionFunc: 'ptyUnprotectStr', 
codeElementConnect: 'SPARK'},
],
note: "string1",
type: "protegrity",
}
]

要查找数组元素，需要有一个具有单独 searchValue 状态的输入（该状态位于父组件中）：

export const SearchWidget = ({ searchValue, handleSearchQuery }) => {
    
  return (
    <div className={styles.mainContainer}>
        <Input
        placeholder='Найти атрибут...'
        value={searchValue}
        onChange={(e: string) => handleSearchQuery(e)} 
        />
    </div>
  )
}

最后，使用该函数过滤数组，以便可以在渲染期间映射其中的数据：

    export const DataResultCards = ({ selectedAttributesArray, searchValue, handleOpenSideBar }) => {
  
  const filteredAttributeList = selectedAttributesArray?.filter(attribute =>
    new RegExp(`${searchValue.toLowerCase().replace(/%/g, '.')}`).test(attribute.code.toLowerCase()),
  );

  return (
    <>
      {filteredAttributeList.length > 0 ? (
        filteredAttributeList?.map(attribute => {
          return <DataResultCard attribute={attribute} />;
        })
      ) : (
        <div>Ничего не найдено</div>
      )}
    </>
  );
};

应该如何进行搜索 例如：

1. 当我在搜索中输入“ de ”时，我得到两个对象：属性卡“ DE unicode1”和“R1_to de ”（通过属性名称找到）
2. 如果我在搜索中输入“ hiv ”，我将在屏幕上看到卡片“DE_unicode1”（它有 codeElementConnect: 'IK_HIVE '）和“R1_to_de”（它有 codeElementConnect: ' HIVE '）。
3. 当您输入“ Str ”时，结果是相同的，因为它们具有protectionFunc：'DE1_string '和protectionFunc：'ptyProtect Str '。

个人属性卡代码：

export const DataResultCard = ({ attribute, handleOpenSideBar }) => {
  return (
    <Card
      style={{ width: 804, minHeight: 180, marginBottom: '5px' }}
    >
<Tag classes={{ tag: styles.typeTag }}>{attribute.attrType}</Tag>
        {attribute.links.length > 0
          ? attribute.links?.map(link => {
              if (link.codeElementConnect === null) {
                return null;
              } else {
                return (
                  <div onClick={() => handleOpenSideBar(link)}>
                    <Tag classes={{ tag: styles.connectedAttrTag }}>{link.codeElementConnect}</Tag>
                  </div>
                );
              }
            })
          : null}
<Text kind="h4b">{attribute.code}</Text>
<Text kind="textSb">Функции шифрования: </Text>
              {attribute.links?.map(link => {
                return (
                  <ul>
                    <li>
                      <ListEncryptionFunction link={link} attribute={attribute} />
                    </li>
                  </ul>
                );
              })}
</Card>
  );
};

我尝试重写过滤器，以便属性中的链接数组也可以用于通过链接名称查找元素：

 const filteredAttributeList = selectedAttributesArray?.filter((attribute) => {
        attribute.links?.map((link) => {
          if (link.codeElementConnect !== null) {
            new RegExp(`${searchValue.toLowerCase().replace(/%/g, '.')}`).test(link.codeElementConnect.toLowerCase()),
          } else {
            new RegExp(`${searchValue.toLowerCase().replace(/%/g, '.')}`).test(attribute.code.toLowerCase()),
          }
        } 
          )
      }
    );

但搜索并非如此。如何设置具有多个条件的过滤器以通过链接名称查找元素？