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

user_tYDk6iCh
  • 69

image.png

如图所示,页面中有一个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
回复
阅读 4.3k
2 个回答
✓ 已被采纳

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏