0

我正在尝试使用 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 中的索引值（从 props 接收）是不同的。

4

0 回答 0