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>