[英]Nested render does not affect DOM
Used: formik 二手货:formik
I am rendering input fields for a form based on data from an external array. 我正在根据来自外部数组的数据渲染表单的输入字段。 The structure of this data is as follows:
该数据的结构如下:
{
label: 'Test Question,
value: 'testquestion',
type: 'select',
options: [{ label: 'yes', value: 'true' }, { label: 'no', value: 'false' }],
conditionalFields: [
{
condition: {
conditionalQuestion: 'experiencePhotography',
answer: 'true',
questions: [
{
label: 'Test Question ADDED IF YES',
value: 'testQuestionYES',
type: 'text'
}
]
}
}
]
}
and I am rendering it as follows: 我将其渲染如下:
case 'select': {
return (
<Fragment key={formField.value}>
<Select name={formField.value} placeholder={formField.label}>
{formField.options &&
formField.options.map(option => (
<Select.Option key={option.value} name={option.value}>
{option.label}
</Select.Option>
))}
</Select>
{formField.conditionalFields &&
formField.conditionalFields.length > 0 &&
formField.conditionalFields.forEach(conditionalField => {
if (values[formField.value]) {
if (values[formField.value] === conditionalField.condition.answer) {
conditionalField.condition.questions.forEach(question => {
console.log(question);
return (
<Fragment>
<Field
key={question.value}
name={question.value}
render={({ field }) => <CustomInput {...field} type="text" label={question.label} />}
/>
</Fragment>
);
});
}
}
})}
</Fragment>
);
}
So in this case, a element Select is rendered, with the relevant options. 因此,在这种情况下,将呈现元素Select和相关选项。 However, since the provided data has a 'conditionalFields' field, I can check the value of the selected dropdown item (done through Formik).
但是,由于提供的数据具有“ conditionalFields”字段,因此我可以检查所选下拉项的值(通过Formik完成)。
values[formField.value] gets data from Formik. values [formField.value]从Formik获取数据。
The data is there, and console.log(question) outputs data, but the Field element below that isn't returned or shown on the DOM. 数据在那里,console.log(question)输出数据,但是下面的Field元素未返回或未显示在DOM上。
forEach
returns undefined
, so you won't render anything when you use {formField.conditionalFields.forEach(/*...*/}
(which is what you're doing if we remove the two guards there). forEach
返回undefined
,因此,当您使用{formField.conditionalFields.forEach(/*...*/}
(如果我们删除那里的两个防护装置,这就是您要做的事情),您将不会呈现任何内容。
Looking inside your forEach
, it looks like you'll want filter
and then map
, eg: 查看您的
forEach
内部,您似乎需要filter
,然后map
,例如:
{ formField.conditionalFields &&
formField.conditionalFields.length > 0 &&
values[formField.value] &&
formField.conditionalFields
.filter(conditionalField => values[formField.value] === conditionalField.condition.answer)
.map(conditionalField => conditionalField.condition.questions.map(question => {
return (
<Fragment>
<Field
key={question.value}
name={question.value}
render={({ field }) => <CustomInput {...field} type="text" label={question.label} />}
/>
</Fragment>
);
}))
}
...or along those lines. ...或沿着这些路线。
FWIW, you can use destructuring in the filter
parameter, and there's no need for a Fragment
around a single element (the Field
): FWIW,您可以在
filter
参数中使用解构,并且不需要在单个元素( Field
)周围使用Fragment
:
{ formField.conditionalFields &&
formField.conditionalFields.length > 0 &&
values[formField.value] &&
formField.conditionalFields
.filter(({condition: {answer}}) => values[formField.value] === answer)
.map(conditionalField => conditionalField.condition.questions.map(question => (
<Field
key={question.value}
name={question.value}
render={({ field }) => <CustomInput {...field} type="text" label={question.label} />}
/>
)))
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.