我如何在 React 中使用嵌套的 map 语句？

Question

我正在尝试遍历我的数据结构。我有嵌套数组，我正在尝试在我的 JSX 中使用嵌套映射函数来访问它。我的终端没有收到任何错误，我正在安慰我的对象以确保它是正确的并且按预期返回。问题是它没有渲染。我认为问题出在我的语法上。第二个地图功能与第一个地图功能不同。

发生这种情况是因为我有两个嵌套的 if 语句吗？我做错了什么？

    <form onSubmit={methods.handleSubmit(onSubmit)}>
      {myForm.controls.map((form, index) => {
        if (form.type === 'text') {
          return (
            <section key={form.prop}>
              <TextInput
                {...form}
                {...errors}
              />
            </section>
          );
        }
        
        if (form.type === 'multi') {
          {form.multiTypes.map(multi => {
            if (multi.type === 'text') {
              return (
                <section key={form.prop}>
                  <TextInput
                    {...form}
                  />
                </section>
              );
            }
          })}
        }
      })}
      <input type="submit" />
    </form>

//数据结构

export const FORM: Form = {
  step_1: {
    controls: [
      {
        question: 75, 
        label: 'Primary federal regulator',
        prop: 'question_75',
        style: '',
        type: 'dropdown',
        placeholder: 'Please select one',
        options: [
          {
            label: 'FCC',
            value: 'FCC',
          },
          {
            label: 'FDA',
            value: 'FDA',
          },
        ],
      },
     
      {
        question: 80,
        label: 'Type of Financial Institution',
        prop: 'question_80',
        style: '50%',
        type: 'multi',
        multiTypes: [
          {
            label: '',
            prop: 'question_80',
            style: '50%',
            type: 'text',
          },
          {
            label: '',
            prop: 'question_80',
            style: '50%',
            type: 'dropdown',
          },
        ],

      },


    ],
  },
};

Answer 1

我相信您不会返回包装嵌套地图回调的地图语句：

<form onSubmit={methods.handleSubmit(onSubmit)}>
      {myForm.controls.map((form, index) => {
        if (form.type === 'text') {
          return (
            <section key={form.prop}>
              <TextInput
                {...form}
                {...errors}
              />
            </section>
          );
        }
        
        if (form.type === 'multi') {
          // This needs to return something.
          // Looks like you may have been treating this as a JSX child
          // RETURN
          return form.multiTypes.map(multi => {
            if (multi.type === 'text') {
              return (
                <section key={form.prop}>
                  <TextInput
                    {...form}
                  />
                </section>
              );
            }
          })
        }
      })}
      <input type="submit" />
    </form>

我如何在 React 中使用嵌套的 map 语句？

How do I use nested map statements in React?

jsx

typescript

ecmascript-6

reactjs