从变量加载初始状态时Formik复选框组失效的原因

问题出在你手动设置了checked属性，这会让复选框脱离Formik的状态管理逻辑。Formik的Field组件本来会自动根据表单状态处理复选框的勾选状态和交互更新，你硬指定checked={CELEBS.includes(celeb)}后，后续用户的勾选/取消操作无法同步到Formik的values里，导致提交时还是初始的空数组。

正确的做法是直接把默认选中的数组赋值给Formik的initialValues，不需要手动控制checked属性：

import React from "react";
import ReactDOM from "react-dom";
import { Formik, Field, Form } from "formik";

const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
const ALL_CELEBS = ["apples", "bananas", "oranges", "grapes"];
const CELEBS = ["apples", "grapes"];
const Basic = () => (
  <div>
    <Formik
      initialValues={{
        result: CELEBS, // 直接把默认选中项设为初始值
      }}
      onSubmit={async (values) => {
        await sleep(500);
        alert(JSON.stringify(values, null, 2));
      }}
    >
      {({ values }) => (
        <Form>
          <div role="group" aria-labelledby="checkbox-group">
            {ALL_CELEBS.map((celeb) => (
              <label key={celeb}>
                <Field
                  type="checkbox"
                  name="result"
                  value={celeb}
                  // 移除手动设置的checked属性
                />
                {celeb}
              </label>
            ))}
          </div>
          <button type="submit">Submit</button>
        </Form>
      )}
    </Formik>
  </div>
);

ReactDOM.render(<Basic />, document.getElementById("root"));

原理是：Formik对同名的复选框组（name都是result）做了特殊处理——当initialValues里的result是数组时，它会自动判断每个复选框的value是否在数组中，以此决定是否勾选；用户操作时，也会自动添加/移除数组里对应的项，完全不需要手动干预checked状态。

内容的提问来源于stack exchange，提问作者ishandutta2007