Вложенный рендеринг не влияет на DOM

Используется: формик

Я отображаю поля ввода для формы на основе данных из внешнего массива. Структура этих данных следующая:

 {
    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.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
0
19
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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} />}
      />
    )))
}

Другие вопросы по теме