React Admin v4.16中嵌套Insert对象表单数据绑定问题求助

正在开发一个侧边抽屉，用于展示带嵌套属性对象的编辑表单。要求不单独调用API获取嵌套属性，直接从父对象中读取并展示嵌套属性供编辑，使用React Admin v4.16开源版本。

核心需求：

• 嵌套的Insert对象集合必须按Insert.hopper属性的数值顺序渲染
• 无论数据层中该集合有0到多少个对象，展示时固定显示6个Insert编辑表单，同时正确绑定已有数据，空白表单生成默认值

Insert对象类型定义如下：

IInsert extends RaRecord {
    id: Identifier,
    inventoryItemId: number,
    hopper: number,
    cameraEnabled: boolean,
    isActive: boolean,
    expiryDate: Date | undefined,
}

曾尝试使用React Admin的<ArrayInput>搭配<SimpleFormIterator>，但未能同时实现数据绑定和静态空白表单生成。

尝试1：使用<ArrayInput>与<SimpleFormIterator> #

insertsList是hopper值为1-6的IInsert数组，原本期望<SimpleFormIterator>通过source属性自动绑定数据，但未成功。

代码片段：

<VerticalAccordianDetails>
  <ArrayInput source="inserts" label="">
    <SimpleFormIterator
      fullWidth
      disableReordering
      sx={{
        [`& .RaSimpleFormIterator-line`]: { marginTop: '10px' },
      }}>
      {insertsList.map((insert: IInsert) => 
        <Fragment key={insert.hopper}>
          <SelectInput 
            label={`Hopper ${insert.hopper}`}
            name={`hopper-${insert.hopper}`}
            source="inventoryItemId"
            choices={insertsData}
            optionText="sku"
            optionValue="id"
            resettable
          />
          <BooleanInput source="cameraEnabled" label="Camera Enabled" />
          <BooleanInput source="isActive" label="Is Active" defaultValue={true} />
          <DateInput source="expiryDate" label="Expiry Date" />
        </Fragment>
      )}
    </SimpleFormIterator>
  </ArrayInput>
</VerticalAccordianDetails>

尝试2：手动初始化insertsList #

页面加载时遍历父对象的inserts列表，生成包含6个条目的insertsList（已有数据匹配对应hopper，无数据则生成默认对象）。控制台输出显示列表生成正确，但组件渲染后数据仍未绑定。

初始化函数 #

let insertsListIndexes = [0,1,2,3,4,5]
let insertsList: IInsert[] = [];
if (documentConfigurationData && documentConfigurationData.inserts) {
    console.log("Entering function to iterate through inserts...")
    console.log(`Inserts list received: ${JSON.stringify(documentConfigurationData.inserts)}`)
    insertsListIndexes.forEach(function(index) {
        let hopper = index + 1

        console.log(`Working on hopper ${hopper}...`)

        let insert = documentConfigurationData.inserts.filter( (insert: any) => insert.hopper === hopper)[0]
        if (insert) {
            console.log(`Found existing insert for hopper ${hopper} = ${JSON.stringify(insert)}`)

            insertsList.push(insert)
        } else {
            console.log(`No existing insert found for hopper ${hopper}. Adding new one...`)
            let newInsert = {
                id: '',
                inventoryItemId: 0,
                hopper: hopper,
                cameraEnabled: false,
                isActive: true,
                expiryDate: undefined
            }

            insertsList.push(newInsert)
            console.log(`New insert added: ${JSON.stringify(newInsert)}`)
        }

        console.log(`Finished iterating through inserts. Final list: ${JSON.stringify(insertsList)}`)
    })
}

控制台输出 #

Finished iterating through inserts. Final list: 
[{"id":"","inventoryItemId":0,"hopper":1,"cameraEnabled":false,"isActive":true},
{"id":"","inventoryItemId":0,"hopper":2,"cameraEnabled":false,"isActive":true},
{"id":"","inventoryItemId":0,"hopper":3,"cameraEnabled":false,"isActive":true},
{"id":"","inventoryItemId":0,"hopper":4,"cameraEnabled":false,"isActive":true},
{"id":1,"documentConfigurationId":1,"inventoryItemId":2,"hopper":5,"cameraEnabled":false,"isActive":false,"expiryDate":"2024-07-21"},
{"id":"","inventoryItemId":0,"hopper":6,"cameraEnabled":false,"isActive":true}]

渲染组件 #

<VerticalAccordianDetails>
  {insertsList.length === 6 && insertsList.map((insert: IInsert) => 
    <Fragment key={insert.hopper}>
      <SelectInput 
        label={`Hopper ${insert.hopper}`}
        name={`hopper-${insert.hopper}`}
        source="inventoryItemId"
        value={insert.inventoryItemId}
        choices={insertsData}
        optionText="sku"
        optionValue="id"
        resettable
      />
      <BooleanInput source={`${insert.cameraEnabled}`} label="Camera Enabled" />
      <BooleanInput source={`${insert.isActive}`} label="Is Active" defaultValue={true} />
      <DateInput source={`${insert.expiryDate}`} label="Expiry Date" />
      <hr />
    </Fragment>
  )}
</VerticalAccordianDetails>

担心这种手动处理数据的方式会破坏React Admin的自动绑定功能，导致后续保存数据时逻辑复杂度增加，希望得到可行的解决方案建议。

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