Arrays 如何从React中的数组呈现复选框

我是新来的。我正在做一个项目，我想从一个来自API响应的数组中呈现复选框，根据短语匹配，我必须对选项进行分组。i、 e如果项目包含“BLR”，则将其分组为所有“BLR-”项目

API响应为：

[
    "AU-COPS",
    "BLR",
    "BLR- End to End ACT testers",
    "BLR-ACT-FUNCTIONAL",
    "BLR-ACT-POLICY",
    "BLR-ASM",
    "BLR-ASM-FUNCTIONAL",
    "BLR-ASM-POLICY",
    "BLR-DAG",
    "BLR-DEMO",
    "BLR-MANAGED",
    "BLR-QI",
    "BLR-TOOLS",
    "DE-COPS",
    "demo-1",
    "demo-2",
    "ES- Audit (S&Q)",
    "ES- Managed",
    "ES-COPS",
    "ES-Functional (managed/unmanaged)",
    "FR- Audit (S&Q)",
    "FR- Functional (managed/unmanaged)",
    "FR-COPS",
    "FR-Managed",
    "IT- Functional (managed/unmanaged)",
    "IT- Managed",
    "IT-Audit (S&Q)",
    "IT-COPS",
    "JP-COPS",
    "SEA-MANAGED",
    "SJO-COPS",
]

为了分组，我又创建了一个数组

var ch=[“BLR”、“UK”、“IT”、“ES”、“SEA”]

“要渲染的代码”复选框：

<div>
  {listOfCheckboxes &&
    checkBoxHeading.map((item, index) => {
      return (
        <>
          <h8>{item}</h8>
          <div key={index}>
            {listOfCheckboxes.filter((childItem, childIndex) => {
              if (childItem.includes(item))
                return (
                  <div key={childIndex}>
                    <label htmlFor={childItem}>{childItem}</label>
                    <input
                      type="checkbox"
                      id={childItem}
                      name={childItem}
                      value={childItem}
                    ></input>
                  </div>
                );
            })}
          </div>
        </>
      );
    })}
</div>;

{检查框列表&&
checkBoxHeading.map（（项目，索引）=>{
返回(
{item}
{listofCheckBox.filter（（childItem，childIndex）=>{
if（子项。包括（项））
返回(
{childItem}
);
})}
);
})}
;

请帮帮我，伙计们

---

我得到的输出列出了没有复选框的所有项目。

过滤器使用错误。筛选器应仅返回true/false。我猜您正在尝试使用.mapWhat是

复选框标题

和

复选框列表

@有些人是对的。您正在将

.map

与

.filter

混合使用。筛选器回调需要返回一个强制为true的值以保留元素，否则返回为false。checkBoxHeading是[“BLR”、“UK”、“IT”、“ES”、“SEA”]，ListofCheckBox是来自API响应的数组。我需要将复选框分组，其中BLR标题将包含所有与“BLR”相关的复选框，ES包含所有与“ES”相关的复选框，依此类推。我可能做错了@Uxnoman请帮帮我。@SomeoneSpecial，我已经试过使用map，效果很好。它能够按预期将复选框返回给我。逻辑保持不变，只是我替换了“映射”而不是过滤器。谢谢你指出这个问题。我想问题解决了吧？