React子组件没有随父组件更新问题的解决

news2024/11/25 2:19:15

前言:今天遇到一个小需求,本来只是修改文案的,结果问题卡了很久很久,想想还是太菜了

问题描述:

根据changePlaceHolder修改AInput的placeholder的默认值,AInput是封装的antd的input组件,期间发现,无论如何改变changePlaceHolder,placeholder显示的都是“显示2”,但其实changePlaceHolder已经是成功改变了的

后面在AInput子组件里面发现,封装的时候,将父组件传的placeholder先在constructor中保存在state里面,使用的时候直接用的this.state.placeholder,造成了子组件没用随父组件更新的结果。

解决方法:

方法一:

在子组件中直接通过placeholder={this.props. placeholder}获取父组件的传值

placeholder={this.props.placeholder}

方法二:

在componentWillReceiveProps对父组件传的参数再一次赋值到state中

componentWillReceiveProps(nextProps) {
    this.setState({placeholder: nextProps.placeholder});
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/53201.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

图片一键调整工具V1.0-免费版

一、工具介绍 这是博主自己开发的图片一键调整工具V1.0,它可以调整图片宽度和高度、压缩图片大小、改变图片背景、转换图片格式和图片透明化,都是很常用的功能。操作起来简单方便。 二、工具操作 1.调整图片背景 首先,把该工具软件和图片放到同一文件…

Linux基础知识与实操-篇二:初识Linux目录管理与操作

文章目录文件与目录管理相对路径与绝对路径目录相关操作查阅文件相关操作文件预设权限搜索与文件文件的搜索基本权限与指令最后在经过上篇 篇一:初识Linux文件权限与配置 后,我们已经基本熟悉并使用了Linux关于文件管理相关的内容,本篇则继续从文件深入…

CrossOver2023虚拟机软件安装双系统教程

您喜欢切换Windows系统吗?喜欢?好吧,您随意。对于其他人而言,想要不依赖于笨重的 Windows 模拟器就能在您的 Mac 系统上运行微软的应用程序,CrossOver是最简单的方式。讲真,您试过模拟器了吗?您…

如何使用Python访问和查询Google BigQuery数据

要使用Python查询Google BigQuery数据,需要将Python客户端连接到BigQuery实例。 将会云客户端库用于Google BigQuery API. 假设您已经设置了Python开发环境。(支持3.7-3.11版本)要安装该库,请在命令行中运行以下命令: pip install --upgrade…

【国际化Intl】Flutter 国际化多语言实践

目标:实现flutter国际化 提示:这里参考一下几个链接 例如: https://github.com/ThinkerWing/language https://juejin.cn/post/6844903823119482888 这篇也很详细,还有包括兼容中文的繁体简体… 可以看看 feat/use-Flutter-Int…

python函数进阶

一、函数多返回值 Q:如果一个函数内两个return,程序如何执行? A:只执行了第一个return,原因是因为return可以退出当前函数,导致return下方的代码不执行 但是如果一个函数需要有多个返回值,该如…

华为云数据库GaussDB(for Cassandra)揭秘:高性能低成本是什么样的体验?

在我们的日常理念中,追求性价比是最为常见的,但是你知道购买低配置还能享受高性能、低延时、超低价的数据库有哪些吗?今天我们就用数据说话,带你深入了解GaussDB(for Cassandra)挑战高性价比! 众所周知,有…

Android开发者们想想:到底是市场饱和?还是你们技术饱和?

根据我的不客观数据体验来看,最饱和的是iOS,同样发布一个职位iOS是其他技术岗位10倍的投递量。当然Android作为一个已经市场化将近十几年的技术门类,它必然早已经是成熟常态。这样的技术行业都不再会有爆炸式的增长。连同Android硬件、手机、…

Go学习之路:方法和接口(DAY 3)

文章目录前引方法和接口1.1、方法/声明方法1.2、方法/捆绑其他类型1.3、方法/方法常用指针传递1.4、方法/普通函数指针传递和方法指针传递区别2.1、接口/方法签名集合2.2、接口/接口断言2.3、接口/switch case练习题、接口/stringer实现字符串打印2.4、接口/错误前引 昨天终于算…

机器学习5数据归一化Feature Scaling

文章目录一、为什么要数据归一化?二、解决方案数据归一化,解决方案1:最值归一化normalization:解决方案2:均值方差归一化standardization;三、最值归一化处理normalization四、均值方差归一化Standardization一、为什么…

ICMP协议(3层网络层协议:IP、ARP、ICMP)

1、ICMP协议端口号? 没有端口号,向TCP/UDP这些都是没有端口号只有协议号,只有应用层才有端口号。 2、ICMP协议是干什么的? 网络探测与回馈机制 1)网络探测 2)路由跟踪,windows命令:…

ABP:内置logger and 第三方库serilog 之间的关系

今天在看项目的日志记录功能&#xff0c;比较疑惑为什么项目中有的地方使用 Logger< T > _logger 然后又在资源文件下看见日志的第三方库 Serilog 解答&#xff1a; ASP.NET Core Build-in Logging ASP.NET Core 提供了 Logging 的抽象接口, third party 都会依据抽象来…

DJ 12-3 程序控制指令

目录 1. 无条件转移指令 JMP &#xff08;1&#xff09;段内直接转移 &#xff08;2&#xff09;段内间接转移 &#xff08;3&#xff09;段间直接转移 &#xff08;4&#xff09;段间间接转移 2. 条件转移指令 3. 循环控制指令 &#xff08;1&#xff09;LOOP 指令 &…

R语言中不同类型的聚类方法比较

聚类方法用于识别从营销&#xff0c;生物医学和地理空间等领域收集的多变量数据集中的相似对象。我们围绕聚类技术进行一些咨询&#xff0c;帮助客户解决独特的业务问题。它们是不同类型的聚类方法&#xff0c;包括&#xff1a; 划分方法分层聚类模糊聚类基于密度的聚类基于模…

Qt Creator 的 Shadow build(影子构建)

目录 一、什么是影子构建 二、如何取消影子构建 一、什么是影子构建 做wpf项目时&#xff0c;项目里面会有bin文件夹&#xff0c;里面有debug和release文件夹&#xff0c;生成的exe就在debug或release里面&#xff0c;但第一次做qt时&#xff0c;发现项目文件夹里面只有源码文…

2022 JuiceFS 社区用户调研结果出炉

为了使 JuiceFS 的发展更贴合用户的真实需求&#xff0c;我们在三周前向社区发出了一份调研问卷。此次调研面向已经将 JuiceFS 应用于生产环境的用户&#xff0c;了解其在应用 JuiceFS 前和使用中的体验与评价。 参与此次调研的用户&#xff0c;大型企业占比最高&#xff0c;有…

李炎恢ECMAScript6 / ES6+(一)

01. ECMAScript6 简介和历史 学习要点&#xff1a; 1.ES6 简介 2.ECMAScript 历史 3.学习和创建 Demo 本节课我们来开始了解 ECMAScript6(简称 ES6)&#xff0c;着重了解它的标准和历史。 一&#xff0e;ES6 简介 ECMAScript6 简称 ES6&#xff0c;是 JavaScript 语言的下一…

Vue3项目引入 vue-quill 编辑器组件并封装使用

这是一款支持Vue3的富文本编辑器 GitHub地址&#xff1a;https://github.com/vueup/vue-quill/ VueQuill官网&#xff1a;https://vueup.github.io/vue-quill/ // 查看 vueup/vue-quill 版本 npm view vueup/vue-quill versions --json// 导入 vueup/vue-quill 依赖包 npm i v…

试编写算法(用C语言)打印值为x的结点的所有祖先,假设值为x的结点不多于一个。(递归实现和非递归实现)

&#xff08;一&#xff09;递归实现&#xff1a; 完整代码&#xff1a; #include<stdio.h> #include<stdlib.h> #include<iostream> using namespace std;#define MaxSize 100 typedef int ElemType; typedef struct BiNode {ElemType data;BiNode* lchil…

基于springboot摄影跟拍预定管理系统设计与实现的源码+文档

摘要 首先,论文一开始便是清楚的论述了系统的研究内容。其次,剖析系统需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确系统的需求。然后在明白了系统的需求基础上需要进一步地设计系统,主要包罗软件架构模式、整体功能模块、数据库设计。…