如何使用 React-final-form 将 FieldArray 功能嵌套在其他 <FieldArray> 组件中答案

【问题标题】：How to nest FieldArray functionality inside other <FieldArray> component with React-final-form如何使用 React-final-form 将 FieldArray 功能嵌套在其他 <FieldArray> 组件中
【发布时间】：2019-06-24 21:46:40
【问题描述】：

在我正在开发的应用程序中，有一个用于进行调查/民意调查的模块。后端已经编程好了，基本上有一个端点可以接受主体中的复杂对象，然后它会构建轮询。复杂对象可以根据投票和问题类型而有所不同，有些是多项选择，有些是投票，有些是开放式的。这个复杂对象的一个例子我正在尝试构建这样的厕所：

{
  "title": "Newish first poll",
  "description": "juan's first wizard poll",
  "status": "new",
  "start_date": "2019-03-12 08:00:00",
  "end_date": "2019-03-25 08:00:00",
  "questions" : [
    {
        "question_text":"HOW CAN DIS BE",
        "type":"1",
        "choices": []
    },
    {
        "question_text":"Choose your weapon",
        "type":"0",
        "choices": [
            {
                "choice_text": "Sword",
                "description": "Sharp and durable, the sword is very popular."
            },
            {
                "choice_text": "Hammer",
                "description": "Stop!"
            },
            {
                "choice_text": "Poetry",
                "description": "Nothing more devastating than a poetry slam"
            }
        ]
    },
    {
        "question_text":"Do you agree?",
        "type":"1"
    }
  ]
}

所以本质上，该对象具有称为问题的 fieldArray，其中包含问题对象。但是，如果是多项选择题，这些问题对象也可以包含选项数组，并且每个选项都有 2 个潜在字段，即选项文本和选项描述。

一般而言，仅使用 onefield 数组和可用的 mutator push，我就可以推送一个完整的问题对象，当前硬编码到一个传递的变量中，如下所示：push('questions',sampleQuestion1) 按下按钮时。

由于问题数组已经包含choices[] 数组，那么该表单将起作用，但是，我无法将choices 数组的值呈现在其他数组中，就像使用顶级FieldArray 一样

这是基本实现的样子

<FieldArray name='questions'>
    {({fields})=>(
        <div>
            {fields.map((question,i)=>(
                <div key={i}>
                    <div className={'form-group'}>
                        <InputField name={`${question}.question_text`} placeholder={'Pregunta'} disabled/>
                        <FieldArray name={'choices'}>
                            {({fields})=>(
                                //i would like to be able to map through fields of the choices array, if present
                            )}
                        </FieldArray>
                    </div>
                </div>
            ))}
        </div>
    )}
</FieldArray>

我尝试在另一个 fieldarray 中放入一个组件，这当然是相当幼稚的，我很快发现 push mutator 已经用添加的数据调用了，我无法映射选择的字段，因为问题在父 fields.map 中传递的对象实际上并不是问题对象本身。

我已经尝试了一些其他技术并且已经阅读了文档，但我有点难过。如果有人可以帮助我弄清楚这是否可能，我将非常感激

【问题讨论】：

标签： javascript reactjs forms react-final-form react-final-form-arrays

【解决方案1】：

我认为您不了解 FieldArray 的用途。 FieldArray 用于当您的数据（表单提交的东西）包含一个数组其长度可以由用户更改。您所拥有的是要呈现到字段中的一系列问题。您应该只映射它们并渲染字段。

类似这样的：

<form>
  {questions.map((question, index) => (
    <label>{question.question_text}</label>
    {question.type === 1 && <Field name={`answers[${index}]`} component="input" type="checkbox"/>}
    {question.type === 0 && <Field name={`answers[${index}]`} component="select">
       {question.choices.map(choice => <option>{choice.choice_text}</option>}
     </Field>}
  ))}
</form>

我不能保证它会编译，但它应该会给你一个大致的想法。它将在提交时生成具有answers 数组的产品表单数据，其索引与questions 数组匹配。

这有帮助吗？

【讨论】：