您可以按group对数据进行分组。

const dataByGroup = data.reduce((groupedData, item) => {
  const groupName = item.group ?? "nogroup";
  if (!(groupName in groupedData)) groupedData[groupName] = [];
  groupedData[groupName].push(item);
  return groupedData;
}, {});

从而产生一个对象，该对象以组名作为键，以权限作为值。

{
  "Admin - Agent": [
    {
      "id": 54,
      "name": "agent_read_all",
      "description": null,
      "displayName": "Read all",
      "group": "Admin - Agent"
    },
    {
      "id": 55,
      "name": "agent_read",
      "description": "Fetch single record",
      "displayName": "Read",
      "group": "Admin - Agent"
    },
    {
      "id": 57,
      "name": "agent_update",
      "description": null,
      "displayName": "Update",
      "group": "Admin - Agent"
    }
  ],
  "nogroup": [
    {
      "id": 56,
      "name": "agent_create",
      "description": null,
      "displayName": "Create"
    },
    {
      "id": 62,
      "name": "candidate_upload_batch_read_all",
      "description": null,
      "displayName": "Read all"
    }
  ]
}

然后，为了进行呈现，您可以Map所有分组对象并获取所有组名，然后再次Map该组中的所有权限。

<b>Permissions Section</b>
{
  Object.entries(([groupName, permissions]) => (
    <List style={{ display: "flex" }}>
      <p>{groupName}</p>
      {permissions.map((permission) => (
        <FormGroup>
          <FormControlLabel
            control={
              <Checkbox
                checked={uroleData.permissions[index] ? true : false} // the index will not be the same since the data is grouped
                value={roleData.permissionId}
                onChange={(e) => {
                  if (e.target.checked) {
                    checkedp.push(permission.id);
                    setRoleData({ ...roleData, permissionId: checkedp });
                  } else {
                    roleData.permissionId.splice(
                      checkedp.indexOf(e.target.value),
                      1
                    );
                  }
                  // console.log(roleData);
                }}
              />
            }
            label={permission.displayName}
          />
        </FormGroup>
      ))}
    </List>
  ));
}

我希望这段代码能有所帮助，你可以根据自己的需要优化它

const array = [
  { id: 1, displayName: "Create", group: "admin" },
  { id: 2, displayName: "Update", group: "admin" },
  { id: 3, displayName: "Delete", group: "admin" },
  { id: 4, displayName: "all", group: "admin" },
  { id: 11, displayName: "Create", group: "agent" },
  { id: 12, displayName: "Update", group: "agent" },
  { id: 13, displayName: "Delete", group: "agent" },
  { id: 14, displayName: "all", group: "agent" }
];

const dict = {};

for (const item of array) {
  if (item.group in dict) {
    dict[item.group].push({
      displayName: item.displayName,
      id: item.id
    });
  } else {
    dict[item.group] = [
      {
        displayName: item.displayName,
        id: item.id
      }
    ];
  }
}

console.log("dict", dict);

// if you need an array
const list = []

for (const key in dict) {
  list.push({
    group: key,
    items: dict[key] 
  })
}

console.log('list', list)

如果组文本不可靠，您可以检查是否可以传递组ID