React Admin中EditGuesser的CheckboxGroupInput预选失效问题求助

我希望用CheckboxGroupInput修改OneToMany类型的account属性，当前用ArrayInput的方案能正常工作，但不够实用，所以更倾向于用复选框。目前已成功展示复选框列表，但在EditGuesser中无法预选中已关联的项。

当前代码 #

<EditGuesser transform={AggregationTransform} actions={<EditActions />}>
            <ArrayInput source="account" label="Comptes">
                <SimpleFormIterator inline disableReordering fullWidth>
                    <ReferenceInput source="@id" reference="accounts">
                        <SelectInput optionText="name" fullWidth label="Compte"/>
                    </ReferenceInput>
                </SimpleFormIterator>
            </ArrayInput>

            <ReferenceArrayInput source="account.id" reference="accounts">
                <CheckboxGroupInput source="account.@id" label="Comptes" row={false} />
            </ReferenceArrayInput>
</EditGuesser>

主API返回结果 #

{
    "@context": "/contexts/Aggregation",
    "@id": "/aggregations",
    "@type": "hydra:Collection",
    "hydra:totalItems": 1,
    "hydra:member": [
        {
            "@id": "/aggregations/1",
            "@type": "Aggregation",
            "id": 1,
            "name": "Veniam quisquam dolorem qui ea inventore.",
            "account": [
                {
                    "@id": "/accounts/4",
                    "@type": "Account",
                    "id": 4,
                    "bank": "/banks/2",
                    "name": "Repudiandae est delectus ullam laudantium."
                },
                {
                    "@id": "/accounts/2",
                    "@type": "Account",
                    "id": 2,
                    "bank": "/banks/2",
                    "name": "Veniam quisquam dolorem qui ea inventore."
                }
            ]
        }
    ]
}

Accounts API返回结果 #

{
    "@context": "/contexts/Account",
    "@id": "/accounts",
    "@type": "hydra:Collection",
    "hydra:totalItems": 2,
    "hydra:member": [
        {
            "@id": "/accounts/2",
            "@type": "Account",
            "id": 2,
            "bank": {
                "@id": "/banks/2",
                "@type": "Bank",
                "name": "Bank 2"
            },
            "name": "Veniam quisquam dolorem qui ea inventore.",
            "officialLabel": "Facilis enim repellat quae et maiores sint dicta.",
            "position": 4,
            "history": true
        },
        {
            "@id": "/accounts/4",
            "@type": "Account",
            "id": 4,
            "bank": {
                "@id": "/banks/2",
                "@type": "Bank",
                "name": "Bank 2"
            },
            "name": "Repudiandae est delectus ullam laudantium.",
            "officialLabel": "Aspernatur voluptatem repudiandae ullam incidunt.",
            "position": 97,
            "history": true
        }
    ],
    "hydra:view": {
        "@id": "/accounts?history=true",
        "@type": "hydra:PartialCollectionView"
    },
    "hydra:search": {
        "@type": "hydra:IriTemplate",
        "hydra:template": "/accounts{?history}",
        "hydra:variableRepresentation": "BasicRepresentation",
        "hydra:mapping": [
            {
                "@type": "IriTemplateMapping",
                "variable": "history",
                "property": "history",
                "required": false
            }
        ]
    }
}

版本信息 #

package.json中react-admin版本为4.16.1：

{
  "name": "react-fin",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@api-platform/admin": "^3.4.4",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^29.5.6",
    "@types/node": "^20.8.9",
    "@types/react": "^18.2.33",
    "@types/react-dom": "^18.2.14",
    "echarts": "^5.4.3",
    "echarts-for-react": "^3.0.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "^5.0.1",
    "typescript": "^5.3.2",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

问题出在ReferenceArrayInput和CheckboxGroupInput的source配置错误，修改如下：

<EditGuesser transform={AggregationTransform} actions={<EditActions />}>
    {/* 原ArrayInput可保留参考，后续可删除 */}
    <ArrayInput source="account" label="Comptes">
        <SimpleFormIterator inline disableReordering fullWidth>
            <ReferenceInput source="@id" reference="accounts">
                <SelectInput optionText="name" fullWidth label="Compte"/>
            </ReferenceInput>
        </SimpleFormIterator>
    </ArrayInput>

    {/* 修正后的复选框配置 */}
    <ReferenceArrayInput source="account" reference="accounts">
        <CheckboxGroupInput source="@id" label="Comptes" row={false} />
    </ReferenceArrayInput>
</EditGuesser>

核心说明：

1. ReferenceArrayInput的source设为"account"，直接读取当前对象中包含关联Account的数组，而非错误的account.id
2. CheckboxGroupInput的source设为"@id"，从每个关联的Account对象中提取@id作为选中标识，和Accounts API返回的Account项@id匹配，从而实现预选中已关联的项

内容的提问来源于stack exchange，提问作者Emmanuel