Как вложить функциональность FieldArray в другой компонент <FieldArray> с помощью React-final-form

Question

В приложении, которое я разрабатываю, есть модуль для проведения опросов / опросов. Бэкэнд уже был запрограммирован, и в основном есть конечная точка, которая принимает сложный объект в теле, а затем будет строить опрос. Сложный объект может варьироваться в зависимости от типа опроса и типа вопроса, некоторые из них имеют множественный выбор, а некоторые - голоса, а некоторые являются открытыми. Примером этого сложного объекта я пытаюсь построить LOOS, как это:

{
  "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 потенциальных поля, текст выбора и описание выбора.

В общих чертах, используя только массив из одного поля и доступную мутацию, я могу выдвинуть объект полного вопроса, в настоящее время жестко закодированный в переменную, передаваемую так: 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>

Я попытался вставить компонент внутри другого полевого массива, это, конечно, довольно наивно, и я быстро обнаружил, что push-мутатор уже был вызван с добавленными данными, и что я не могу отобразить поля выбора, поскольку объект вопроса прошел в родитель fields.map на самом деле не является объектом вопроса как таковым.

Я попробовал несколько других методов и был прочитан в документации, но я немного озадачен. Если бы кто-нибудь мог помочь мне понять, возможно ли это, я был бы очень признателен

Answer 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 массив.

Это помогает?