javascript - 嵌套渲染不影响 DOM

Question

用过:formik

我正在根据来自外部数组的数据为表单呈现输入字段。该数据的结构如下:

 {
    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.log(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.log(question) 输出数据，但其下方的 Field 元素未返回或显示在 DOM 上。

Answer 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 参数中使用解构，并且不需要围绕单个元素(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} />}
      />
    )))
}