Antd V4版本中Form resetFields无效

简介: Antd V4版本中Form resetFields无效

问题描述

  • 给表单中的每一个表单项传入一个参数的时候,参数已经传进去了,但是initialValue并没有发生变化。

image.png

原因

这是因为调用resetFileds的时机不对,也就是生命周期的问题。

解决办法

  • 在生命周期函数componentDidUpdate中添加下面的代码即可。
componentDidUpdate() {
    if (this.formRef.current !== null) {
        this.formRef.current.resetFields();
    }
}

场景代码

export default class UpdateForm extends Component {
    formRef = React.createRef();
    static propTypes = {
        categoryName: PropTypes.string.isRequired
    }
    componentDidUpdate() {
        if (this.formRef.current !== null) {
            this.formRef.current.resetFields();
        }
    }
    render() {
        const { categoryName } = this.props;
        console.log(categoryName);
        return (
            <Form ref={this.formRef}>
                <Item initialValue={categoryName} name="categoryName" >
                    <Input placeholder="请输入分类名称" />
                </Item>
            </Form>
        )
    }
}


相关文章
|
数据采集 人工智能 数据可视化
Streamline Analyst: 基于LLMs、一键完成全流程的数据分析AI Agent 🚀
Streamline Analyst 🪄是一个开源的基于GPT-4这样的大语言模型的应用,目标简化数据分析中从数据清洗到模型测试的全部流程。分类预测、聚类、回归、数据集可视化、数据预处理、编码、特征选择、目标属性判断、可视化、最佳模型选择等等任务都不在话下。用户需要做的只有选择数据文件、选择分析模式,剩下的工作就可以让AI来接管了。所有处理后的数据和训练的模型都可下载。
1092 2
Streamline Analyst: 基于LLMs、一键完成全流程的数据分析AI Agent 🚀
|
6月前
|
自然语言处理 前端开发 Java
JBoltAI 框架完整实操案例 在 Java 生态中快速构建大模型应用全流程实战指南
本案例基于JBoltAI框架,展示如何快速构建Java生态中的大模型应用——智能客服系统。系统面向电商平台,具备自动回答常见问题、意图识别、多轮对话理解及复杂问题转接人工等功能。采用Spring Boot+JBoltAI架构,集成向量数据库与大模型(如文心一言或通义千问)。内容涵盖需求分析、环境搭建、代码实现(知识库管理、核心服务、REST API)、前端界面开发及部署测试全流程,助你高效掌握大模型应用开发。
628 5
|
JavaScript 前端开发 编译器
ES6 代码转成 ES5 代码的实现思路是什么
ES6 代码转成 ES5 代码的实现思路主要是通过编译器将新的语法结构和特性转换为旧版本的 JavaScript 代码,以确保在不支持 ES6 的环境中可以正常运行。常用的工具如 Babel 可以自动完成这一过程。
|
前端开发 容器
彻底理解粘性定位 - position: sticky
彻底理解粘性定位 - position: sticky
|
供应链 物联网 区块链
未来技术的脉动:探索区块链、物联网与虚拟现实的融合趋势
本文深入探讨了区块链技术、物联网(IoT)和虚拟现实(VR)这三个领域的最新发展趋势,以及它们在现代科技生态中的交互作用。通过分析这些技术的独特优势和面临的挑战,我们揭示了它们如何共同塑造未来的技术景观,特别是在数据安全、智能设备管理和沉浸式体验方面。文章还讨论了这些技术融合后可能带来的社会和文化影响,以及它们如何推动创新和促进经济增长。
237 3
Axure 多平台自适应
Axure 多平台自适应
336 0
|
存储 关系型数据库 分布式数据库
云栖大会|云原生数据库PolarDB:向云原生纵深发展
持续推动以PolarDB为代表的云数据库向云原生纵深发展
云栖大会|云原生数据库PolarDB:向云原生纵深发展
|
JavaScript 前端开发
【vue2中引入阿里第三方图标库使用自定义的Ant Design Vue组件a-cascader级联选择后缀图标】
【vue2中引入阿里第三方图标库使用自定义的Ant Design Vue组件a-cascader级联选择后缀图标】
1086 0
嵌入式 QT多界面切换
嵌入式 QT多界面切换
|
JavaScript
vue数字滚动效果组件
vue数字滚动效果组件
378 0