Javascript 正在创建动态表Object.keys，不允许返回表的行

我正在创建一个动态表。如果我编写这样的函数：-

函数可渲染（类别）{
返回(
地位
名称
产品
{data.data.changer.map（changer=>{
const valuePresent=changer.attack.find(
x=>x.unique==category.name
);
如果（当前值）{
返回(
{changer.rule_status}
{changer.vendor\u rule\u name}
{changer.firewall_vendor}
);
}
})}
);
}

它返回了我需要它的完美表格

但如果我尝试使键具有动态性，就像：-

函数可渲染（类别）{
返回(
地位
名称
产品
{Object.keys（data.data）.forEach（（key，index）=>{
如果（类别===键）{
{
data.data[key].map（转换器=>{
const valuePresent=changer.attack.find(
x=>x.unique==category.name
);
如果（当前值）{
返回(
{changer.rule_status}
{changer.vendor\u rule\u name}
{changer.firewall_vendor}
);
}
});
}
}
})}
);
}

它不返回行，或和 任何关于我为什么要使key也动态的想法都不会返回任何东西，因此内部

映射中的JSX永远不会返回。如果您的目标是仅使用属性
coverageCategory
呈现数据，我将获得该属性，然后像最初一样执行
map
，例如：

function renderTable(coverageCategory) {
  const data = coverageData.data[coverageCategory];

  return (
    <table>
      <tr>
        <th>Rule Status</th>
        <th>Rule Name</th>
        <th>Product name</th>
      </tr>
      {data.firewall.map(firewall => {
        const valuePresent = firewall.mitre_attack.find(
          x => x.technique === categorySelected.name
        );
        if (valuePresent) {
          return (
            <tr>
              <td>{firewall.rule_status}</td>
              <td>{firewall.vendor_rule_name}</td>
              <td>{firewall.firewall_vendor}</td>
            </tr>
          );
        }
      })}
    </table>
  );
}

你为什么在第二次使用forEach？那不行。
data.firewall
  .filter((firewall) =>
    firewall.mitre_attack.some((x) => x.technique === categorySelected.name)
  )
  .map((firewall) => (
    <tr>
      <td>{firewall.rule_status}</td>
      <td>{firewall.vendor_rule_name}</td>
      <td>{firewall.firewall_vendor}</td>
    </tr>
  ));