Formik结合Material-UI时状态为true的Checkbox未显示选中如何解决

• 错误1：Formik useField返回的字段值存放在field.value属性，你使用的field.checked是不存在的无效属性，无法正确读取Formik中存储的布尔状态
• 错误2：控制复选框选中状态的checked属性需要挂载到MUI的Checkbox组件上，你加在FormControlLabel上的属性不会生效
• 错误3：你封装的组件名为CheckboxWrapper，实际调用时错误使用了Checkbox（MUI原生组件），没有接入Formik的状态同步逻辑

import React from 'react';
import {
  Checkbox,
  FormControl,
  FormControlLabel,
  FormGroup,
  FormLabel
} from '@material-ui/core';
import { useField, useFormikContext } from 'formik';

const CheckboxWrapper = ({
  name,
  label,
  legend,
  ...otherProps
}) => {
  const { setFieldValue } = useFormikContext();
  const [field, meta] = useField(name);

  const handleChange = evt => {
    const { checked } = evt.target;
    setFieldValue(name, checked);
  };

  const configCheckbox = {
    ...field,
    // 新增：将Formik存储的布尔值绑定到Checkbox的选中属性
    checked: field.value,
    onChange: handleChange
  };

  const configFormControl = {};
  if (meta && meta.touched && meta.error) {
    configFormControl.error = true;
  }

  return (
    <FormControl {...configFormControl}>
      <FormLabel component="legend">{legend}</FormLabel>
      <FormGroup>
        <FormControlLabel
          control={<Checkbox {...configCheckbox} />}
          label={label}
        />
      </FormGroup>
    </FormControl>
  );
};

export default CheckboxWrapper;

// 替换原来的<Checkbox />调用，使用你封装的支持Formik的组件
<CheckboxWrapper 
  name="termsAgreement"
  label="I agree"
/>

修复后无论是首次操作还是跳转Stepper步骤后返回，复选框状态都会和Formik存储的状态完全同步。

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