Formik onChange 不適用於輸入類型“復選框”

Question

我在我的 React projet 中使用 Formik 並遇到一個問題，我必須 map 數組並向用戶顯示復選框，用戶可以通過切換它來 select /取消選擇。

下面是它的代碼

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 function 運行時，我看到了更新的值，但由於某些原因它突然被重置。

希望有人幫幫我，謝謝！

Answer 1

您需要處理 onChange 和 useEffect 的輔助方法也對此進行研究。 如果您需要代碼示例，希望這對您有所幫助，我可以回復您。