Ant design Form设置initialValue后无法更新数据

Question

如图所示，页面中有一个List列表，点击“查看”后弹出Modal框，里面是一个Form表单，显示的是该条List项对应的数据

为了使表单只起到数据展示的结果，将从后台获取到的数据设置为Form的initialValue,然后显示字段值使用的是Input组件，去掉了Input组件的边框，并且设置成了只读状态。

现在出现的问题是，无论我点开哪一个List项的“查看”，表单中的数据都是第一次点开的内容，也就是表单中的数据不会变化了，但是打印Data时，都是正确的该项对应的数据。

是因为这里设置了initialValues出了问题吗？虽然我传入的是对应List项的数据，但是每次点开“查看”数据并没有更新，请问有什么解决办法吗？

代码如下：

interface DemoProps {
    onCancel: (flag?: boolean) => void;
    ModalVisible: boolean;
    Data: any
}

const Demo: React.FC<DemoProps> = (props) => {

    const {
        onCancel: SetModalVisible,
        ModalVisible,
        Data
    } = props

    const [form] = Form.useForm();

    const renderFooter = () => {
        return (
            <>
                <Button type='primary' onClick={() => SetModalVisible(false)}>关闭</Button>
            </>
        )
    }

    return (
        <>
            {Data && (
                <Modal
                    destroyOnClose
                    width={600}
                    closable={true}
                    visible={ModalVisible}
                    footer={renderFooter()}
                    onCancel={() => SetModalVisible()}
                >

                    <Form
                        {...layout}
                        name="basic"
                        form={form}
                        initialValues={{
                            id: Data?.id,
                            state: Data?.state,
                        }}
                    >
                        <Form.Item
                            label="ID"
                            name="id"
                        >
                            <Input bordered={false} readOnly={true}/>
                        </Form.Item>

                        <Form.Item
                            label="状态"
                            name="state"
                        >
                            <Input bordered={false} readOnly={true}/>
                        </Form.Item>

                    </Form>
                </Modal>
            )}
        </>
    )
}
export default Demo

Answer 1

initialValues不适用于动态设置表单初始值。
通过不同list设置key，打开表单时手动设置表单值（setFieldsValue）即可。

Answer 2

解决了，initialValue只会在第一次进行渲染，后续数据的更新并不会造成重新渲染。所以使用form.setFieldsValue直接对FormItem的name进行更新就好了