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匹配的对象，而header和footer数组仅返回1个对象。我在做什么错了？

为什么我的数组过滤处理程序无法正常运行？

0 个答案: