React中Ant Design Form initialValues未正常初始化值问题排查

你的代码存在几个关键错误，导致表单无法正确读取嵌套结构的初始值，以下是具体问题和修正方案：

错误点说明 #

1. 拼写错误：Object.Keys → Object.keys
   JavaScript内置的对象键名遍历方法是小写的Object.keys()，大写的Object.Keys不存在，会直接导致遍历失败，表单组件无法渲染。

2. Form.Item的name未匹配嵌套路径
   你的initialValues是多层嵌套结构（如dummy.key、dummykey.name），但Form.Item的name仅写了子键名，Ant Design Form无法定位到嵌套的初始值。需要用数组格式指定完整路径，比如['dummy', objKey]。

3. Form.Item未闭合且缺少表单控件
   代码中的<Form.Item>标签没有闭合，且未包裹具体的表单输入组件（如<Input />），Form.Item必须和表单控件配合才能完成值的绑定与展示。

4. 未定义的value变量
   formValues中的value是未声明的变量，需替换为具体的初始值（如字符串、空值等）。

修正后的代码示例 #

// 先通过Form.useForm创建form实例（需在组件内声明）
const [form] = Form.useForm();

// 替换为实际的初始值
const formValues = {
  dummy: {
    key: '初始值1',
    key1: '初始值2',
    key2: '初始值3'
  },
  dummykey: {
    name: '姓名初始值',
    fullname: '全名初始值',
  },
}

<Form name='myform' form={form} initialValues={formValues} onFinish={onFinished}>
  <>
    {Object.keys(formValues.dummy).map((objKey) => {
      return (
        <Row key={objKey}>
          <Col span={6}> {objKey} </Col> 
          <Col span={6}> 
            <Form.Item name={['dummy', objKey]}>
              <Input /> {/* 添加表单控件 */}
            </Form.Item>
          </Col> 
        </Row>
      )
    })}

    {Object.keys(formValues.dummykey).map((objKey) => {
      return (
        <Row key={objKey}>
          <Col span={6}> {objKey} </Col> 
          <Col span={6}> 
            <Form.Item name={['dummykey', objKey]}>
              <Input />
            </Form.Item>
          </Col> 
        </Row>
      )
    })}
  </>
</Form>

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