reactjs - 为什么我的数组过滤处理程序没有按预期工作？

Question

我正在尝试创建一个处理程序，该处理程序通过设置在状态内的对象数组进行过滤，并将其传递给具有 3 个部分的子组件。在每个部分中，我都调用处理程序并将用于过滤的值传递给它：

处理程序如下所示：

addSectionConfigsHandler = config => {
  const configs = this.state.usedComponents.filter(
    item => item.group === config
  );

  return configs;
};

在子组件中，我为以下 3 个部分中的每个部分调用一次：

<div label="Header"/>
  <AddSectionItems
    configs={props.configs("header")}
    droppableId="header"
  />
</div>
<div label="Content">
  <AddSectionItems
    configs={props.configs("body")}
    droppableId="content"
  />
</div>
<div label="Footer">
  <AddSectionItems
    configs={props.configs("footer")}
    droppableId="footer"
  />
</div>

usedComponents 数组包含多个如下所示的对象：

{
  id: 0,
  group: "header",
  ...
} 

我希望得到 3 个数组，其中包含针对页眉、正文和页脚过滤的对象，然后我想对其进行映射，但它没有按预期工作。在我的状态中，我有 4 个应该与页眉匹配的对象和 3 个应该与页脚匹配的对象，我确实得到了 3 个数组，但是只有 body 数组返回所有与 body 匹配的对象，而页眉和页脚数组只返回 1 个对象. 我究竟做错了什么？

标签： reactjs