Не удается обновить элементы fieldArray - PullRequest
Новая
       7

Не удается обновить элементы fieldArray

0 голосов
/ 03 ноября 2018

Я пытаюсь создать динамическую форму, используя React.js и библиотеку Formik. Проблема в том, что я не могу обновить массив служб, за исключением первого элемента массива.

Моя модель формы выглядит так: 

{
    name: ''
    services: [{ name: '', comment: '' }],
}

Моя форма должна иметь массив служб с двумя полями (имя и комментарий). Имена сервисов генерируются как переключатели из определенного списка. Вот код: 

<FieldArray
        name="services"
        render={arrayHelpers => (
          <div>
            {values.services.map((serviceX, index) => (
              <div key={index}>
                {serviceList.map((service, serviceIndex) => (
                  <div className="col col--md-4" key={serviceIndex}>
                    <div className="radio--container">
                      <input
                        name={`services.${index}.name`}
                        type="radio"
                        id={service.label}
                        value={
                          services
                            ? services.find(
                                service => service.value === values.services[index].name
                              )
                            : ''
                        }
                        checked={service.value === values.services[index].name}
                        onChange={() =>
                          setFieldValue(
                            `services.${index}.name`,
                            service.value
                          )
                        }
                        onBlur={handleBlur}
                      />
                      <label htmlFor={service.label}>{service.label}</label>

                      <div className="check">
                        <div className="inside" />
                      </div>
                    </div>
                  </div>
                ))}

                <Field name={`services.${index}.comment`} />
                <button
                  type="button"
                  onClick={() => arrayHelpers.remove(index)}
                >
                  -
                </button>
              </div>
            ))}
            <button
              type="button"
              onClick={() => arrayHelpers.push({ name: '', comment: '' })}
            >
              +
            </button>
          </div>
        )}
      />

Я также попытался создать отдельный компонент без сохранения состояния для создания списка служб (переключатели), но получил те же результаты. Однако, используя отдельный компонент без сохранения состояния, я заметил, что значение индекса (полученное от реквизита) в DOM отличается от компонента.

...