Используется: формик
Я отображаю поля ввода для формы на основе данных из внешнего массива. Структура этих данных следующая:
{
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'
}
]
}
}
]
}
и я делаю это следующим образом:
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.info(question);
return (
<Fragment>
<Field
key = {question.value}
name = {question.value}
render = {({ field }) => <CustomInput {...field} type = "text" label = {question.label} />}
/>
</Fragment>
);
});
}
}
})}
</Fragment>
);
}
Таким образом, в этом случае отображается элемент Select с соответствующими параметрами. Однако, поскольку предоставленные данные имеют поле «conditionalFields», я могу проверить значение выбранного элемента раскрывающегося списка (сделано через Formik).
values[formField.value] получает данные от Formik.
Данные есть, и console.info(question) выводит данные, но элемент Field под ним не возвращается и не отображается в модели DOM.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


forEach возвращает undefined, поэтому при использовании {formField.conditionalFields.forEach(/*...*/} вы ничего не отрисуете (что вы и сделаете, если мы удалим там двух охранников).
Глядя внутрь своего 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>
);
}))
}
...или в том же духе.
FWIW, вы можете использовать деструктурирование в параметре filter, и нет необходимости в Fragment вокруг одного элемента (Field):
{ 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} />}
/>
)))
}