ant Design的Form组件实现通过实例设置嵌套表单项的值

情况描述

官方的下图例子中，点击Fill form可以填充表单内容

代码如下：
表单内容

<Form.Item name="note" label="Note" rules={[{ required: true }]}>
  <Input />
</Form.Item>
<Form.Item name="gender" label="Gender" rules={[{ required: true }]}>
  <Select
    placeholder="Select a option and change input text above"
    onChange={onGenderChange}
    allowClear
  >
    <Option value="male">male</Option>
    <Option value="female">female</Option>
    <Option value="other">other</Option>
  </Select>
</Form.Item>
<Form.Item>
	<Button type="primary" htmlType="submit">
	  Submit
	</Button>
	<Button htmlType="button" onClick={onReset}>
	  Reset
	</Button>
	<Button type="link" htmlType="button" onClick={onFill}>
	  Fill form
	</Button>
</Form.Item>

填充数据的方法

const onFill = () => {
  form.setFieldsValue({
    note: 'Hello world!',
    gender: 'male',
  });
};

点击填充后的效果

当需求是嵌套表单时，填充效果就会失效
代码如下：

// form.Item 的name值为多个时，此处以两个举例
<Form.Item name=["info","note"] label="Note" rules={[{ required: true }]}>
  <Input />
</Form.Item>
<Form.Item name=["info","gender"] label="Gender" rules={[{ required: true }]}>
  <Select
    placeholder="Select a option and change input text above"
    onChange={onGenderChange}
    allowClear
  >
    <Option value="male">male</Option>
    <Option value="female">female</Option>
    <Option value="other">other</Option>
  </Select>
</Form.Item>

修改填充事件内容

// ==此处为错误示例==
const onFill = () => {
  form.setFieldsValue({
    'info.note': 'Hello world!',
    'info.gender': 'male',
  });
};

点击填充按钮毫无效果

问题解决

const onFill = () => {
  form.setFieldsValue({
    info: {
	    note: 'Hello world!',
	    gender: 'male',
	}
  });
};

试了多种方式后，发现用这种嵌套格式的方式设置可以设置成功。
但是在实际需求中，表单嵌套的层级是未知的，表单的name值也不是固定的，所以需要根据name值动态设置

// nameArr 为formItem - name的值
const innerValue = {
	note: 'Hello world!',
    gender: 'male',
}
const itemObj = (nameArr, innerValue) => {
  let valueObj = {}
  for (let i = nameArr.length - 1; i>=0; i--){
 	 valueObj = (i == nameArr.length - 1 ? {[nameArr[i]]: innerValue} : {[nameArr[i]]: {...valueObj}})
  }
  return valueObj
}
const onFill = () => {
	form.setFieldsValue(itemObj(nameArr, innerValue))
};

至此。可实现不同层级，任意name值的setFieldsValue