Ant Design Modal 嵌套 Form 表单，initialValue 值不动态更新？

前端

2023-11-03 09:41:13

问题描述

在使用Ant Design Pro开发项目时，经常需要使用Modal弹窗来展示或编辑数据。然而，在某些情况下，当尝试将列表中的数据动态传递给Modal中的Form表单的initialValues属性时，发现初始值并未按预期更新。

分析原因

这个问题通常出现在React组件生命周期中，当传入的数据发生变化时，Modal内部的Form组件并没有重新渲染或正确接收到最新的initialValues。这可能是由于组件的状态管理方式或是数据传递机制的问题造成的。

解决方案一：使用useEffect监听变化

原理说明

通过使用React Hook中的useEffect来监听传入的数据变化，并在发生变化时手动更新Form的值，确保每次Modal打开都能显示最新的数据。此方法能有效地将外部数据变化同步到Form内部。

代码示例

import React, { useEffect } from 'react';
import { Modal, Form, Input } from 'antd';

const EditModal = ({ visible, onCancel, record }) => {
    const [form] = Form.useForm();

    useEffect(() => {
        if (record) {
            form.setFieldsValue(record);
        }
    }, [record]);

    return (
        <Modal
            title="编辑数据"
            visible={visible}
            onOk={() => { /* 提交处理逻辑 */ }}
            onCancel={onCancel}>
            <Form form={form}>
                <Form.Item name='name' label="名称">
                    <Input />
                </Form.Item>
                {/* 其他表单项 */}
            </Form>
        </Modal>
    );
};

export default EditModal;

操作步骤

在组件中使用useEffect来监听外部传递的record数据变化。
当record变化时，通过form.setFieldsValue()方法更新表单值。

解决方案二：控制Modal打开关闭

另一种方式是控制Modal自身的生命周期，在每次Modal显示前强制重新获取数据或设置初始值。这种方式适合于数据来源稳定且每次打开Modal都需要最新数据的情况。

原理说明

在控制Modal开启和关闭时，通过重置initialValues来确保每次都是最新的数据。这种方法避免了组件状态同步的问题，但需要保证外部传入的数据源是可靠的。

代码示例

import React, { useState } from 'react';
import { Modal, Form, Input } from 'antd';

const EditModal = ({ visible, onCancel }) => {
    const [form] = Form.useForm();
    const [data, setData] = useState(null);

    return (
        <Modal
            title="编辑数据"
            visible={visible}
            onOk={() => { /* 提交处理逻辑 */ }}
            onCancel={() => { 
                onCancel(); 
                setData(null); // 关闭后清空数据，确保下次打开时重新获取最新值。
            }}>
            <Form form={form} initialValues={data}>
                <Form.Item name='name' label="名称">
                    <Input />
                </Form.Item>
                {/* 其他表单项 */}
            </Form>
        </Modal>
    );
};

export default EditModal;