首页 > 其他分享 >react 中componentDidMount 只加载一次的解决办法

react 中componentDidMount 只加载一次的解决办法

时间:2023-02-13 16:55:52浏览次数:36  
标签:渲染 componentDidMount 每次 react state 组件 data 加载

项目中遇到bug:componentDidMount只能在刚开始渲染时取值,无法随着父组件中值的改变而改变;

 

 

 此处的data只能取到页面一开始渲染时的数据,若父组件更新data的值则无法时时取到最新的data。

解决方法:

1.把子组件的显示用一个state的值去控制,每次当state变化的时候都会导致子组件的重新渲染,componentDidMount方法自然每次都会执行;

2.给子组件设置一个随机的key值,这样子组件每次都重新渲染,每次显示的时候都重新刷新componentDidMount方法,如图:

 

标签:渲染,componentDidMount,每次,react,state,组件,data,加载
From: https://www.cnblogs.com/WLFDayDreamer/p/17116928.html

相关文章

  • react状态管理redux
    redux产生的历史背景当我们的前端系统变得复杂,包含众多子组件,特别是包含很长一条子组件链时。我们的state管理就会非常繁琐,例如如下图,如果Child11需要用到App里的stat......
  • AJAX动态加载下拉框数据
    1、type表数据2、前端页面现在的想法是点击商品类型下拉框,动态加载所有商品类型利用select标签的id属性3、jQuery代码部分这句放在自执行函数里面loadProductType("/ssm_tes......
  • Mybatis使用注解实现一对一复杂关系映射及延迟加载
    一、问题引入:在加载账户信息时同时加载该账户的用户信息,根据情况可实现延时加载(注解方式实现)数据库字段如下:user表:account表:二、添加User实体类和Account类us......
  • 前端react面试题(边面边更)
    diff算法是怎么运作每一种节点类型有自己的属性,也就是prop,每次进行diff的时候,react会先比较该节点类型,假如节点类型不一样,那么react会直接删除该节点,然后直接创建新的节点......
  • 老生常谈React的diff算法原理-面试版
    第一次发文章notonly(虽然)版式可能有点烂butalso(但是)最后赋有手稿研究finally看完他你有收获diff算法:对于update的组件,他会将当前组件与该组件在上次更新是对应的......
  • 前端react面试题指南
    概述下React中的事件处理逻辑抹平浏览器差异,实现更好的跨平台。避免垃圾回收,React引入事件池,在事件池中获取或释放事件对象,避免频繁地去创建和销毁。方便事件统一管......
  • react18-学习笔记42-button组件分析
    importReactfrom"react";importclassNamesfrom"classnames"exportenumButtonSize{Large='lg',Small='sm'}exportenumButtonType{Primary="primary",......
  • react18-学习笔记41-button组件分析
     ......
  • react18-学习笔记43-接受无限多的参数
    classnames可以接受很多参数报告  ......
  • react18-学习笔记40-normalise.css
     ......