当prop更改时,子组件没有更新

最新推荐文章于 2024-05-02 19:48:44 发布
最新推荐文章于 2024-05-02 19:48:44 发布
阅读量3.8k 收藏
点赞数 2
文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43342124/article/details/122795137
版权

问题：当prop更改时,子组件没有更新
已测试过父组件的state数据已改变，但子组件没有重新渲染

React 希望在创建子组件时高效。如果它与另一个子组件相同，则不会呈现新组件，这会使页面加载速度更快。
解决方法：
（1）父组件
添加一个 Key 会强制 React 渲染一个新组件，从而重置该新组件的 State。

<FilterPicker key={this.state.openType}  defaultValue={defaultValue} type={this.state.openType} data={data} cols={cols} onOk={this.handleFMOk} onCancel={this.close} />

（2）在子组件 判断是否需要setState更新数据

 componentWillReceiveProps(nextProps){
    if(nextProps.defaultValue){
      this.setState({
        value:nextProps.defaultValue
      })
    }
  }

但是componentWillReceiveProps方法要被淘汰了，不推荐
React中componentWillReceiveProps的替代升级方案
以上两种方式均测试可以解决

其他方法可以查看
React 之 state 数据改变页面不更新未重新渲染的 7 种情况 及 解决办法

MoMokolyouo
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
详解React中传入组件的props改变时更新组件的几种实现方法
12-10
我们使用react的时候常常需要在一个组件传入的props更新时重新渲染该组件，常用的方法是在componentWillReceiveProps中将新的props更新到组件的state中（这种state被成为派生状态（Derived State）），从而实现重新渲染。React 16.3中还引入了一个新的钩子函数getDerivedStateFromProps来专门实现这一需求。但无论是用componentWillReceiveProps还是getDerivedStateFromProps都不是那么优雅，而且容易出错。所以今天来探讨一下这类实现会产生的问题和更好的实现方案。 何时使用派生状态
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不
02-06
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。 额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。子组件想修改时，只能通过 $emit 派发一个自定义事件，父组件接收到后，由父组件修改。 有两种常见的试图改变一个 prop 的情形 : 这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用。 在这种情况下，最好定义一个本地的 data 属性并将这个 prop 用作其初始值： props: [‘initialCounter’], data: function () { return { counter: this.initialCounter } } 这个 prop 以一种原始的值传入且需要进行转换。 在这种情况下，最好使用这个 prop
Vue3父组件props数据更新后，子组件未更新
KARLGong的博客
03-24 615
在使用Vue3的props进行父子组件通信时，父组件更新了props，却没有反映在子组件中。的，但都没有用或太麻烦。最终在Stack Overflow的一个问题的角落里找到了原因：参考。，这种情况下子组件的值就不会随父组件的变化而变化。只需要让父组件初始化时。的值为空字符串，子组件加载时其prop值就会为。看了网上很多解决方案，有说用。其实原因是父组件初始化时。的值不为空字符串即可。
React+Dav改变props不触发componentWillReceiveProps导致页面无法再次渲染
weixin_34309435的博客
04-08 1621
最近在学习dva，这个让人头疼，学会了超级好用的状态管理框架，但是发现在真正实践中还遇到了很多问题，通过耐心的寻找度娘，终于解决了这个让我困惑了一阵问题。所以记录一下，希望能够帮助后期入坑的小伙伴们。这是一个简单的todoList，通过路由跳转三个页面，add、home、modify，home中包括的两个逻辑，删除和修改，点击修改按钮时跳转的修改页面，点击删除时将该条信息删除，问题就是出现在删除功...
【react】记录一次react组件props依赖异步数据（setFieldsValue）后传递form给子组件，再逐层传递给孙子组件引起的未渲染异常
hzxOnlineOk的博客
01-16 1008
react祖父组件设置异步数据（setFieldsValue）后传递form给子组件，再逐层传递给孙子组件引起的未渲染异常，孙子组件如果不设置useEffect和useState去监听value的值进行重渲染，会出现获取得到value最新值，但是不进行渲染的异常。
React+Dva 当改变models中的state时，props中数据改变但不触发render事件导致页面无法再次更新渲染
m0_61549953的博客
03-20 305
let items = JSON,parse(JSON.stringify(this.props.items))//比较常用。所以这就出现一个问题，为什么props中数据改变但不触发render事件导致页面无法再次更新渲染，是不会触发componentWillReceiveProps,引发render函数的重新执行"他无法拷贝函数，（补充:时间对象会变成 字符串 的形式、RegExp，Error、函数会丢失）通过深拷贝，重新给items复制到一个新的堆栈，所以我就这样子，拷贝后再赋值给他。
react父组件更改props子组件无法刷新原因
lvfengxian2019的博客
09-06 6081
react父子传值问题
react类式组件,使用props给state进行数据初始化，父组件更新，子组件数据未发生变化
Sunny_swallow的博客
04-10 1037
也就是说，子组件刷新时不再执行constructor,不会对state重新赋值，所有子组件虽然执行了render，但是渲染数据不变。或者componentWillReceiveProps生命周期，使props更新时重新更新value的值。要解决问题可以使用shouldComponentUpdate中重新对state赋值。当父组件更新导致子组件更新时，子组件的生命周期执行顺序是。当子组件接收的props赋值给state时如。会出现页面重新渲染，但是页面数据未发生变化。
React 性能优化 - 父组件更新时，子组件不进行不必要的更新
jialiang808的博客
07-14 1788
React父组件更新时，子组件不进行不必要的更新都有哪些方法
【vue】prop更新，子组件不重新渲染的解决方法
qq_34838046的博客
09-26 5148
1.添加prop的侦听器 props:['xxx'], data(){ return{ yyy } } ... watch:{ xxx:function(newValue){ this.yyy=xxx } }
React 中的重新渲染
qq_32198115的博客
11-21 4242
React 组件在组件的状态 state 或者组件的属性 props 改变的时候，会重新渲染，条件简单，但是实际上稍不注意，会引起灾难性的重新渲染......
解决vue 子组件修改父组件传来的props值报错问题
12-13
vue不推荐直接在子组件中修改父组件传来的props的值，会报错 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or...
vue组件Prop传递数据的实现示例
12-09
每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop。 1、Prop静态传递数据 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> ...
vue2.0 子组件改变props值,并向父组件传值的方法
11-28
为什么我们会有修改 prop 中数据的冲动呢？通常是这两种原因： prop 作为初始值传入后，子组件想把它当作局部数据来用； prop 作为初始值传入，由子组件处理成其它数据输出。 对这两种原因，正确的应对方式是： 定义...
[react] 如何解决引用类型在pureComponent下修改值的时候，页面不渲染的问题？
歌谣的博客
11-29 378
[react] 如何解决引用类型在pureComponent下修改值的时候，页面不渲染的问题？ 不要在state或者props当中修改数组或者对象 通过使用es6的assign方法或者数组的扩展运算符或者使用第三方库，强制返回一个新的对象 (页面为什么不渲染) 是因为组件内容是采用的浅拷贝，对象的值虽然发生改变，但是引用的地址没有发生改变 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...
子组件props数据更新，视图确不更新
weixin_49021723的博客
10-17 3898
子组件props数据更新，视图确不更新。
当父组件的对象值发生改变的时候，子组件没有重新进行渲染？
Kerryliuyue的博客
09-04 2309
当在页面使用子组件时，页面进行渲染时，子组件已经进行渲染，所以会出现当父组件的值进行修改时，子组件没有重新渲染。一般来说，父子组件传值，当父组件值变化时子组件的值也会实时变化，子组件使用prop接收数据。
vue2中为什么修改数据不重新渲染？
用户什么都没有写。
07-24 802
组件状态没有定义成响应式的数据？？更改时不会更新视图？？
React和antd如何封装权限按钮
最新发布
读心悦
05-02 398
在实际应用中，你可能需要处理更复杂的情况，比如权限的动态加载、权限的继承、权限的细分等等。你可能还需要为权限按钮添加更多的交互和反馈，比如当用户尝试访问一个没有权限的按钮时，显示一个提示消息。在上面的例子中，PermissionButton组件接受一个permission属性，该属性指定了按钮所需的权限。权限判断：首先，你需要有一个权限管理系统来存储和检查用户的权限。封装按钮组件：基于用户的权限，你可以封装一个React组件，这个组件会渲染一个antd的按钮，或者根据用户的权限不渲染按钮。
@Prop调父组件修改子组件
12-23
@Prop是Vue.js中用于接收父组件传递的props的装饰器。根据引用内容，Vue不推荐直接在子组件中修改父组件传来的props的值，因为这样做会导致警告和潜在的问题。相反，Vue建议使用data或computed属性来处理子组件中的数据。 以下是两种常用的方式来调用父组件修改子组件的props： 1. 通过父组件on监听子组件emit事件实现修改prop： ```vue // 子组件 <template> <button @click="updateProp">修改prop</button> </template> <script> export default { props: ['propValue'], methods: { updateProp() { this.$emit('update:propValue', newValue); } } } </script> // 父组件 <template> <child-component :propValue="propValue" @update:propValue="propValue = $event"></child-component> </template> <script> export default { data() { return { propValue: '初始值' } } } </script> ``` 2. 通过父组件sync修饰符 + 子组件emit事件实现修改prop： ```vue // 子组件 <template> <button @click="updateProp">修改prop</button> </template> <script> export default { props: ['propValue'], methods: { updateProp() { this.$emit('update:propValue', newValue); } } } </script> // 父组件 <template> <child-component :propValue.sync="propValue"></child-component> </template> <script> export default { data() { return { propValue: '初始值' } } } </script> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值