我已经检查了FieldArray
的示例,所有搜索/问题都指向将简单数组作为初始化器传递。但是我不确定如何使Field
显示初始值,如果数组由对象组成。
const renderFields = ({ fields, command }) => fields.map((name, index, fields) => {
const { type, component } = getRenderer(command, name)
const { fieldDescription, fieldName } = fields.get(index)
return <Field key={`${name}.${fieldName}`} name={`${name}.${fieldName}`} type={type} component={component} label={fieldDescription} />
})
// usage
const Command = ({ command }: Props) => (
<div className="command">
<FieldArray name={`${command}.fields`} component={renderFields} command={command} />
</div>
)
initialValues
看起来像:
{
id: 'some identifier',
abc: { include: true, fields: [{fieldDescription, fieldName, value }, ...]
def: { include: true, fields: [{fieldDescription, fieldName, value }, ...]
}
abc
,def
以command
传递到renderFields
。
弄清楚了 - 诀窍是不使用 FieldArray
。
const renderMembers = ({ fieldDefs, command }) => {
const fields = fieldDefs[command].members
return (
<FormSection key={i} name={`${c}`}>
{fields.map((member, index) => {
const name = `members.${member.name}`
return (
<Field
key={index}
name={name}
type="text"
component={renderField}
label={member.label}
/>
)
})}
</FormSection>
)
}
const Command = ({ command }: Props) => (
<div className="command">
{renderMembers({fieldDefs, key: c})}
</div>
)
完全工作的示例:codesandbox