React中动态设置Antd Form输入框默认值不显示问题

核心原因 #

Antd Form的initialValues仅在组件首次渲染时生效，而你的接口数据是异步获取的，当数据返回并更新winningTags时，Form已经完成初始化，不会再读取新的initialValues。另外代码里还有两处小问题需要修正。

具体修复步骤 #

1. 修正state初始值
   接口返回的是单个标签对象，不是数组，所以初始state应该设为空对象：

   const [winningTags, setWinningTags] = useState({})
   

2. 异步获取数据后手动设置表单值
   在接口请求成功后，调用form.setFieldsValue来更新表单，而不是依赖initialValues：

   useEffect(() => {
       const getDraws = async () => {
           const res = await CategoryServices.getSingleWinningTags(id);
           if (res.data.data) {
               setWinningTags(res.data.data)
               // 手动设置表单字段值
               form.setFieldsValue({
                   name: res.data.data.name,
                   stake_price: res.data.data.stake_price
               })
           }
       }
       getDraws()
   }, [id, form]); // 依赖项加上id和form，避免闭包问题
   

3. 修正Input的错误属性
   stake_price对应的Input里写了values="Mon"，这是无效属性，Form的值由Form.Item管理，直接去掉即可：

   <Input type='text' />
   

完整修正后的代码片段 #

const EditWinningTags = () => {
    const { id } = useParams()
    const [winningTags, setWinningTags] = useState({}) // 初始值改为空对象
    const [form] = Form.useForm();

    useEffect(() => {
        const getDraws = async () => {
            const res = await CategoryServices.getSingleWinningTags(id);
            if (res.data.data) {
                setWinningTags(res.data.data)
                // 异步获取数据后设置表单值
                form.setFieldsValue({
                    name: res.data.data.name,
                    stake_price: res.data.data.stake_price
                })
            }
        }
        getDraws()
    }, [id, form]); // 添加依赖项

    const onFinish = (values) => {
        console.log(values);
    };
    const onReset = () => {
        form.resetFields();
    };

    return (
        <div className="d-flex justify-content-center align-items-center" style={{ "height": "70vh" }}>
            <Card title="Edit Winning Tag" style={{ width: 600 }}>
                {winningTags.name}
                <Form
                    {...layout}
                    form={form}
                    name="control-hooks"
                    onFinish={onFinish}
                    style={{ maxWidth: 600 }}
                >
                    <Form.Item
                        name="name"
                        label="Name"
                        rules={[{ required: true }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        name="stake_price"
                        label="Stake Price"
                        rules={[{ required: true }]}
                    >
                        <Input type='text' /> {/* 去掉无效的values属性 */}
                    </Form.Item>
                    <Form.Item {...tailLayout}>
                        <Button type="primary" htmlType="submit">
                            Submit
                        </Button>
                    </Form.Item>
                </Form>
            </Card>
        </div>
    )
}

补充说明 #

• 把form加入useEffect的依赖项，确保每次组件重新渲染时能拿到最新的form实例，避免闭包导致的setFieldsValue失效。
• 初始state设为空对象后，winningTags && winningTags.name可以简化为winningTags.name，因为空对象不会报错，接口返回数据后会自动更新。

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