如果从变量加载初始状态，为什么 Formik 组复选框不起作用？

Question

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

const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
ALL_CELEBS = ["apples", "bananas", "oranges", "grapes"];
CELEBS = ["apples", "grapes"];
const Basic = () => (
  <div>
    <Formik
      initialValues={{
        result: [],
      }}
      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={CELEBS.includes(celeb)}
                />
                {celeb}
              </label>
            ))}
          </div>
          <button type="submit">Submit</button>
        </Form>
      )}
    </Formik>
  </div>
);

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

https://codesandbox.io/p/sandbox/floral-tdd-klyz33

如果我删除

checked

属性，一切似乎都工作正常。 我已经阅读了 stackoverflow 上的其他问题来加载复选框初始状态，例如 this，他们似乎没有回答组案例。

Answer 1

Check 属性将使其始终检查而不仅仅是初始值， 所以我们需要从

Field

标签中删除选中的属性，并添加值

initialValues

initialValues

对此：

initialValues={{
   result: enabledcelebs,
}}

和

Field

标记为：

<Field
   type="checkbox"
   name="result"
   value={celeb}
/>

我之前尝试过这个，但不起作用，这就是为什么我在 stackoverflow 上发布的原因，后来意识到它不起作用，因为

enabledcelebs

尚未加载。 所以我必须在完成装货时检查它，如下所示：

if (enabledcelebs){
   <div >
     Entire html goes here
   </div >
}