react-admin 在传递给编辑组件之前更改数据

Question

在react-admin中，

Edit

组件加载记录并使用记录值预填充表单。 我正在使用

TranslatableInputs

，我的问题是记录数据结构与

TranslatableInputs

所需/返回的数据结构不同。 因此，当我查看编辑表单时，它只会将输入呈现为空。 有没有办法在将我的数据传递给

TranslatableInputs

之前对其进行转换？

可翻译输入返回的格式：

{
  [field: string]: Record<string, string>
}

但是我的模型具有以下格式：

{
  translations: Record<string, Record<string, string>>;
}

编辑表格：

<Edit>
    <SimpleForm>
        <TextInput source="color" type="color" sx={{minWidth: 100}} />
        <Box sx={{width: "50%", maxWidth: "100%"}} >
            <TranslatableInputs locales={["en", "es", "de"]}>
                <TextInput source="name" fullWidth />
                <TextInput source="synonyms" multiline fullWidth/>
            </TranslatableInputs>
        </Box>
    </SimpleForm>
</Edit>

Answer 1

我不明白你的翻译数据格式 - 示例会有所帮助。

TranslatableInput

不支持

parse

和

format

，所以你必须回退到

<Edit transform>

属性：

<Edit transform={convertData}>
    <SimpleForm>
        <TextInput source="color" type="color" sx={{minWidth: 100}} />
        <Box sx={{width: "50%", maxWidth: "100%"}} >
            <TranslatableInputs locales={["en", "es", "de"]}>
                <TextInput source="name" fullWidth />
                <TextInput source="synonyms" multiline fullWidth/>
            </TranslatableInputs>
        </Box>
    </SimpleForm>
</Edit>

使用以下转换代码：

const convertData = record => ({
   ...record,
   translations: [convert data here]
})

Answer 2

我遇到了同样的问题，并且有几个字段需要解析。所以我找到了 RecordContext.Consumer 的解决方法。也许，使用 useContext(RecordContext) 可以实现相同的行为。

import {
  Edit,
  SimpleForm,
  RecordContext
} from "react-admin";

<Edit>
  <RecordContext.Consumer>
    {value => {
      const parsedValue = parseData(value);
      return (
        <SimpleForm record={parsedValue}>
          <MyForm />
        </SimpleForm>
       )}
     }
  </RecordContext.Consumer>
</Edit>