reactjs - Formik中具有初始值的复选框不切换，需要处理选中/默认选中

Question

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

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

这意味着我不能使用 checked 但必须使用 defaultChecked。但问题是，我的 values 是在初始 useEffect fetch 中的 Ajax fetch 之后出现的。 defaultChecked 仅适用于第一次渲染。当第一次渲染发生时，显然 values 尚未加载并且 values.certifyAndReview === 'Y' 为 false。所以现在我的复选框的初始值不再起作用，尽管我现在可以切换。

<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}

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