Ant Design Form自定义CheckGroup控件置于Form.Item内报错无法正常显示如何解决

需求&现象 #

• 要实现的效果：通过CheckBoxGroup选择水果类型，每个选中项附带InputNumber输入对应水果的采购数量
• 已完成操作：自定义了名为CheckGroup的表单控件，按照官方要求实现了value和onChange两个接口
• 异常表现：
  • 把CheckGroup放在Form.Item内部时，抛出错误TypeError: Cannot read properties of undefined (reading 'map')，组件内打印value显示为undefined
  • 把CheckGroup放在Form.Item外部时运行完全正常，value传递也符合预期

根因分析 #

AntD Form的Form.Item会自动向绑定的表单组件注入value属性，如果你的Form没有给对应字段设置初始值，注入的value就是undefined。你在CheckGroup内部直接对value调用map方法，自然会抛出空值读取的报错。
放在Form.Item外部时，你是自己手动给组件传value，值是有定义的，所以不会出问题。

修复方案 #

两种方案任选一种即可，也可以同时配置做双重兜底：

1. 自定义组件侧设置默认值
   在CheckGroup的参数定义处，给value设置默认值为空数组：

// 自定义CheckGroup组件的入参修改
const CheckGroup = ({ value = [], onChange }) => {
  // 原有逻辑保持不变
}

2. Form侧设置字段初始值
   在使用Form的地方，给CheckGroup绑定的字段设置初始值为空数组：

<Form
  initialValues={{
    // 这里替换为你Form.Item绑定的实际字段名
    fruitList: []
  }}
>
  <Form.Item name="fruitList">
    <CheckGroup />
  </Form.Item>
</Form>

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