热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

初始化表单后,Redux表单无法更新新值

如何解决《初始化表单后,Redux表单无法更新新值》经验,为你挑选了1个好方法。

我正在使用redux向导表单进行编辑,其中我在向导中的每个页面的componentDidMount中加载数据.但是,当我更新值并转到下一页时,更新的值不会在第二种形式中重新连接,而如果我来到上一页,它会加载初始值而不是更新的值.任何人都可以告诉我我的代码有什么问题:

第一表格:

componentDidMount() {
const users = this.props.users;
let user = {};
user = users[this.props.userID];
this.setState({file: user.profilePicture});
this.props.initialize(user);
console.log('user is', user);
}

render() {


const { handleSubmit } = this.props;
  const age = (value) => (value == null ? '' : this.state.age);
  return (
    
      
        
          
            
              
                
              
              
                
              
            
            
              
                
              
              
                
              
            
          
          
); } } export default reduxForm({ form: 'userEditForm', keepDirtyOnReinitialize: true, enableReinitialize: true, validate })(UserGeneralForm);

第二表格:

componentDidMount() {
    const users = this.props.users;
    let user = {};
    user = users[this.props.userID];
    this.props.initialize(user);
    console.log('users detail in Personaldetail form', user);
  }


 render() {
  const { handleSubmit, previousPage } = this.props;
  const users = this.props.users;
  let user = {};
  user = users[this.props.userID];
  return (
    
      
        
          
            
            
              
                
              
              
                
              
            
            
              
                
              

              
                
              
            
            
              
                
              

              
                
              
            
            
              
                
                  
                
              
              
                
                  
                
              
            
          
          
); }

小智.. 6

对于表单1,您需要创建通过mapStatetoprops和mapDispatchToProps连接表单,并在mapstatetoprops中设置将在compomentdidmount期间填充的初始值.在mapdispatchtoprops中调度将在更新期间更新表单的操作....并在最后传递mapdispatchtoprops和连接方法参数中的mapstatetoprops并在连接的组件中导出表单如下所示. 在此输入图像描述



1> 小智..:

对于表单1,您需要创建通过mapStatetoprops和mapDispatchToProps连接表单,并在mapstatetoprops中设置将在compomentdidmount期间填充的初始值.在mapdispatchtoprops中调度将在更新期间更新表单的操作....并在最后传递mapdispatchtoprops和连接方法参数中的mapstatetoprops并在连接的组件中导出表单如下所示. 在此输入图像描述


推荐阅读
  • 本文讨论了一个关于cuowu类的问题,作者在使用cuowu类时遇到了错误提示和使用AdjustmentListener的问题。文章提供了16个解决方案,并给出了两个可能导致错误的原因。 ... [详细]
  • 本文介绍了如何使用Express App提供静态文件,同时提到了一些不需要使用的文件,如package.json和/.ssh/known_hosts,并解释了为什么app.get('*')无法捕获所有请求以及为什么app.use(express.static(__dirname))可能会提供不需要的文件。 ... [详细]
  • OpenMap教程4 – 图层概述
    本文介绍了OpenMap教程4中关于地图图层的内容,包括将ShapeLayer添加到MapBean中的方法,OpenMap支持的图层类型以及使用BufferedLayer创建图像的MapBean。此外,还介绍了Layer背景标志的作用和OMGraphicHandlerLayer的基础层类。 ... [详细]
  • Webpack5内置处理图片资源的配置方法
    本文介绍了在Webpack5中处理图片资源的配置方法。在Webpack4中,我们需要使用file-loader和url-loader来处理图片资源,但是在Webpack5中,这两个Loader的功能已经被内置到Webpack中,我们只需要简单配置即可实现图片资源的处理。本文还介绍了一些常用的配置方法,如匹配不同类型的图片文件、设置输出路径等。通过本文的学习,读者可以快速掌握Webpack5处理图片资源的方法。 ... [详细]
  • 本文介绍了如何使用php限制数据库插入的条数并显示每次插入数据库之间的数据数目,以及避免重复提交的方法。同时还介绍了如何限制某一个数据库用户的并发连接数,以及设置数据库的连接数和连接超时时间的方法。最后提供了一些关于浏览器在线用户数和数据库连接数量比例的参考值。 ... [详细]
  • FeatureRequestIsyourfeaturerequestrelatedtoaproblem?Please ... [详细]
  • 前景:当UI一个查询条件为多项选择,或录入多个条件的时候,比如查询所有名称里面包含以下动态条件,需要模糊查询里面每一项时比如是这样一个数组条件:newstring[]{兴业银行, ... [详细]
  • 深入理解CSS中的margin属性及其应用场景
    本文主要介绍了CSS中的margin属性及其应用场景,包括垂直外边距合并、padding的使用时机、行内替换元素与费替换元素的区别、margin的基线、盒子的物理大小、显示大小、逻辑大小等知识点。通过深入理解这些概念,读者可以更好地掌握margin的用法和原理。同时,文中提供了一些相关的文档和规范供读者参考。 ... [详细]
  • 浏览器中的异常检测算法及其在深度学习中的应用
    本文介绍了在浏览器中进行异常检测的算法,包括统计学方法和机器学习方法,并探讨了异常检测在深度学习中的应用。异常检测在金融领域的信用卡欺诈、企业安全领域的非法入侵、IT运维中的设备维护时间点预测等方面具有广泛的应用。通过使用TensorFlow.js进行异常检测,可以实现对单变量和多变量异常的检测。统计学方法通过估计数据的分布概率来计算数据点的异常概率,而机器学习方法则通过训练数据来建立异常检测模型。 ... [详细]
  • Spring常用注解(绝对经典),全靠这份Java知识点PDF大全
    本文介绍了Spring常用注解和注入bean的注解,包括@Bean、@Autowired、@Inject等,同时提供了一个Java知识点PDF大全的资源链接。其中详细介绍了ColorFactoryBean的使用,以及@Autowired和@Inject的区别和用法。此外,还提到了@Required属性的配置和使用。 ... [详细]
  • 本文记录了在vue cli 3.x中移除console的一些采坑经验,通过使用uglifyjs-webpack-plugin插件,在vue.config.js中进行相关配置,包括设置minimizer、UglifyJsPlugin和compress等参数,最终成功移除了console。同时,还包括了一些可能出现的报错情况和解决方法。 ... [详细]
  • 网址:https:vue.docschina.orgv2guideforms.html表单input绑定基础用法可以通过使用v-model指令,在 ... [详细]
  • VueCLI多页分目录打包的步骤记录
    本文介绍了使用VueCLI进行多页分目录打包的步骤,包括页面目录结构、安装依赖、获取Vue CLI需要的多页对象等内容。同时还提供了自定义不同模块页面标题的方法。 ... [详细]
  • React基础篇一 - JSX语法扩展与使用
    本文介绍了React基础篇一中的JSX语法扩展与使用。JSX是一种JavaScript的语法扩展,用于描述React中的用户界面。文章详细介绍了在JSX中使用表达式的方法,并给出了一个示例代码。最后,提到了JSX在编译后会被转化为普通的JavaScript对象。 ... [详细]
  • node.jsrequire和ES6导入导出的区别原 ... [详细]
author-avatar
萧俊瑄俊明纬伦
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有