Formik 中具有初始值的复选框未切换，需要处理 Checked/defaultChecked

Question

我在 Formik 中有一个复选框，其初始值是在数据库获取后确定的，该复选框填充values. 但是，如果我执行以下操作，那么尽管初始值是正确的，但我无法切换该复选框，它始终保持选中状态。

<Form.Control type="checkbox" 
              id="checkCertAgreement" 
              name="certAgreement"
              checked={values.certifyAndReview === 'Y'}
              value="Y"
              onChange={handleChange} 
              onBlur={handleBlur}   
/>

这意味着我不能使用checked但必须使用defaultChecked。但问题是，我values在初始获取中进行了 Ajax 获取useEffect。defaultChecked仅适用于第一次渲染。当第一次渲染发生时，显然values还没有加载并且values.certifyAndReview === 'Y'是错误的。所以现在我的复选框的初始值不再起作用，尽管我现在可以切换。

<Form.Control type="checkbox" 
              id="checkCertAgreement" 
              name="certAgreement"
              defaultChecked={values.certifyAndReview === 'Y'}
              value="Y"
              onChange={handleChange} 
              onBlur={handleBlur}   
/>

有什么解决办法吗？ 注意：由于某种原因，单选按钮上不会出现此问题。在单选按钮上，当我指定 时checked={values.field === 'Y'}，它既设置初始获取后值，又允许我进行切换。

Answer 1

我必须添加一个明确的内容checked，如下所示，

checked={values.field == 'Y' ? true : false}

现在它会拾取初始化的检查状态。