React Antd Form数据填充求助：如何从键值对象填充表单项？

核心问题修正 #

你的代码存在两个关键错误，导致表单无法正常渲染和交互：

1. 使用forEach遍历数据：forEach没有返回值，React无法识别需要渲染的元素数组，必须改用map
2. 手动给Input传递value：Antd Form通过Form.Item的name属性和initialValues已经实现了受控状态绑定，手动传value会打断表单的状态管理逻辑，导致输入无法更新

修正后的代码 #

import { Form, Input } from 'antd';

const onFinish = (values) => {
    console.log('Success:', values);
};
const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
};

const data = {
    fname: 'First',
    lname: 'Last',
    age: '31'
};

const MyForm = () => (
    <>
        <h2>My Data</h2>
        <Form
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            initialValues={data}
        >
            {/* 用map替代forEach，移除Input的value属性 */}
            {Object.entries(data).map(([key, _]) => (
                <Form.Item key={key} label={key} name={key}>
                    <Input />
                </Form.Item>
            ))}
        </Form>
    </>
);

export default MyForm;

进阶替代方案（配置化生成） #

如果需要支持不同类型的表单控件（比如年龄用数字输入框），可以改用配置化的方式，扩展性更强：

import { Form, Input, InputNumber } from 'antd';

const onFinish = (values) => {
    console.log('Success:', values);
};
const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
};

// 配置化字段：指定标签、键、控件类型、默认值
const fieldConfigs = [
    { label: 'fname', key: 'fname', component: Input, value: 'First' },
    { label: 'lname', key: 'lname', component: Input, value: 'Last' },
    { label: 'age', key: 'age', component: InputNumber, value: 31 }
];

const MyForm = () => (
    <>
        <h2>My Data</h2>
        <Form
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            // 从配置中提取initialValues
            initialValues={fieldConfigs.reduce((acc, item) => {
                acc[item.key] = item.value;
                return acc;
            }, {})}
        >
            {fieldConfigs.map(({ label, key, component: Component }) => (
                <Form.Item key={key} label={label} name={key}>
                    <Component />
                </Form.Item>
            ))}
        </Form>
    </>
);

export default MyForm;

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