javascript - Formik onChange 不适用于输入类型“复选框”

Question

我在我的反应项目中使用 Formik 并遇到了一个问题，我必须映射数组并向用户显示复选框，用户可以通过切换它来选择/取消选择。

这是下面的代码

import { Row, Col, Divider } from "antd";

import { Input, Button } from "antd";
import { useFormik } from "formik";

export default function FormSection() {
  const formik = useFormik({
    enableReinitialize: true,
    initialValues: {
      extraCovers: [
        { checked: false, label: "Riscos Eléctricos" },
        { checked: false, label: "Fenónemos Sísmicos" },
        { checked: false, label: "Danos Acidentais" },
        { checked: false, label: "Bens Refrigerados" },
        { checked: false, label: "Bens do Jardim" },
        { checked: false, label: "Equipamento informático" },
        { checked: false, label: "Veículos na Garagem" },
      ],
    },

    onSubmit: (values) => {},
  });

  const editExtraCovers = (item, index) => {
    let oldItem = formik.values.extraCovers[index];
    oldItem.checked = !oldItem.checked;
    // console.log(oldItem, 'old123')
    formik.setFieldValue(`extraCovers[${index}]`, oldItem);
    console.log(formik.values.extraCovers);
  };
  return (
    <div className="firstSection">
      <form onSubmit={formik.handleSubmit}>
        <Row gutter={[8, 20]}>
          {formik.values.extraCovers.map((item, index) => {
            console.log(item);
            return (
              <Col span={6} xs={24} sm={12} md={8} lg={6}>
                <input
                  type="checkbox"
                  checked={item.checked}
                  onChange={() => editExtraCovers(item, index)}
                />
                {item.label}
              </Col>
            );
          })}
        </Row>

        <button type="submit" className="button-enabled">
          CONTINUAR
        </button>
      </form>
    </div>
  );
}

所以当 onChange 函数运行时，我看到更新的值，但由于某些原因它突然被重置。

希望有人帮助我，谢谢！

标签： javascriptreactjsformik