Javascript 多次迭代用于创建通用过滤器

我正在尝试开发一种通用的过滤器组件，它可以有许多字段来过滤类似的颜色， 尺寸、价格范围等，每个字段可能有不同类型的元素，如颜色 复选框、单选按钮和价格范围可能有输入元素、下拉列表等，以支持这种变化 在某些情况下，我尝试使用这种模式，但在这里，我必须多次重复相同的内容

我不确定这个数据结构。如果有人有建议，请帮助我改进此代码，但 这里的主要问题是“多次迭代”。如何改进此代码

const filterParams = {
  field: {
    id     : 1, label  : 'Field', content: <FieldFilter />
  },
  employee: {
    id     : 1, label  : 'Employee', content: <Employee />
  }
}

<Filter filterParams={filterParams} activeFilterParam="field" />

const filterParams={
字段：{
id:1，标签：“字段”，内容：
},
雇员：{
id:1，标签：“员工”，内容：
}
}

const Filter=（{filterParams，activeFilterParam}）=>{
const[show，setShow]=useState（false）
返回(
设置显示（！show）}>过滤器
{show&&(
{
返回(
key（filterParams）.map（filterParam=>{
返回(
{filterParams[filterParam].label}
)
}))
}} />
{Object.keys（filterParams）.map（filterParam=>{
返回(
{filterParams[filterParam].content}
)
})}
拯救
设置显示（！show）}>取消
)}
)
}

如果您不喜欢对

对象.keys（filterParams）.map的多次调用，可以将循环移动到组件函数的顶部。以下类似的方法可能会起作用：

const Filter = ({ filterParams, activeFilterParam }) => {
  const [show, setShow]=useState(false)

  const {tabs, panels} = Object.keys(filterParams)
    .reduce((acc, filterParam) => {
      acc.tabs.push(
        <Tabs.Tab key={filterParam} id={filterParam}>{filterParams[filterParam].label}</Tabs.Tab>
      );
      acc.panels.push(
        <Tabs.Panel key={filterParam} panelId={filterParam}>{filterParams[filterParam].content}</Tabs.Panel>
      );
      return acc;
    }, { tabs: [], panels: [] });

  return (
    ...
        <Card style={{ marginTop: 10 }}>
          <Card.Content>
            <Tabs activeTab={activeFilterParam}>
              <Tabs.List render={() => tabs} />
              <Tabs.Panels>
                {panels}
              </Tabs.Panels>
            </Tabs>
            ...
        </Card>
    ...
  )
}


const Filter=（{filterParams，activeFilterParam}）=>{
const[show，setShow]=useState（false）
const{tabs，panels}=Object.keys（filterParams）
.reduce（（acc，filterParam）=>{
按(
{filterParams[filterParam].label}
);
按(
{filterParams[filterParam].content}
);
返回acc；
}，{tabs:[]，panels:[]}）；
返回(
...
制表符}/>
{面板}
...
...
)
}

请注意，我还没有运行此程序-它可能不太正确，但应该给出总体思路…
它有点难看，但我看不出有什么问题。请您指出难看的部分，好吗？如果您对我可以改进的地方有任何建议，请建议我。您所指的“多次迭代”是组件映射吗？我同意@FrankerZ。我认为，如果您发现性能问题，那么使用memonization可能会有所帮助。如果您有大量的过滤器，则重新呈现这些过滤器。将导出的
过滤器
组件包装在react的memo HOC中，并传递自定义的propsEqual函数，或者计算出并使用
usemo
钩子来计算
Tabs.Tab
和
Tabs.Panel
组件数组。更进一步的一步是使用
usemo
来另外记忆结果，因此如果
filterParams
prop值没有更新，则返回最后计算的值。用于筛选的usemocomponent？@Serenity可用于整个
过滤器
组件，和/或仅记忆
reduce
调用返回的对象。哪一个是合适的取决于传递到
过滤器
组件的道具发生更改的可能性（以及其中的哪一个）。当然我会玩memo。谢谢大家。
const Filter = ({ filterParams, activeFilterParam }) => {
  const [show, setShow]=useState(false)

  const {tabs, panels} = Object.keys(filterParams)
    .reduce((acc, filterParam) => {
      acc.tabs.push(
        <Tabs.Tab key={filterParam} id={filterParam}>{filterParams[filterParam].label}</Tabs.Tab>
      );
      acc.panels.push(
        <Tabs.Panel key={filterParam} panelId={filterParam}>{filterParams[filterParam].content}</Tabs.Panel>
      );
      return acc;
    }, { tabs: [], panels: [] });

  return (
    ...
        <Card style={{ marginTop: 10 }}>
          <Card.Content>
            <Tabs activeTab={activeFilterParam}>
              <Tabs.List render={() => tabs} />
              <Tabs.Panels>
                {panels}
              </Tabs.Panels>
            </Tabs>
            ...
        </Card>
    ...
  )
}