zoukankan      html  css  js  c++  java
  • react---之下拉菜单默认选中的值始终不变的问题

    需求:点击下拉菜单,出来主题列表选项,如果一个后台返回的组织已经有主题,那就默认选中该条选项。如果没有主题,那么默认第一个主题。
    问题:后台返回了有主题的数据,但是下拉菜单一直显示是默认主题。
    正确应显示下图(由于下拉列表会把下拉组件挡住,所以这边分开截图)。
    如图:下拉框

    下拉列表(测试数据)

    主要代码如下:

    select 是一个公用的下拉组件,在调用的时候传了defaultValue的值是挂载在state上的themeId

    state上的themeId取值是后台返回的:

    问题原因:
    经过定位发现,应该是生命周期的问题,defaultValue,是页面渲染只能改变一次的值,在组件render之前是没有取到数据的,所以我给的是默认主题,render之后才会执行componentDidMount周期函数,此时我才拿到数据,但是defaultValue只能改变一次,我拿到数据后再去改变主题的值已经不起效了。

    解决方案:
    react是先执行render,再执行componentDidMount的,那么我在没加载到数据之前,不去render,由于数据结构的原因,我在组件render的时候加了如下代码

    如上问题就解决了。

    总结:组件的生命周期被实例话的时候执行的顺序是:

    1、getDefaultProps
    2、getInitialState
    3、componentWillMount
    4、render
    5、componentDidMount 

    是先执行render渲染页面的dom,然后再执行componentDidMount这个生命周期方法的。

  • 相关阅读:
    SpringBoot EnumValidator验证器实现
    【原创】SpringCloud:基于Spring Cloud netflix全家桶搭建一个完整的微服务架构系统
    Hystrix Dashboard监控报“Unable to connect to Command Metric Stream”?
    Mysql sql_mode的合理设置
    nginx 调优
    函数指针
    进程与线程
    大小端学习
    联合体和结构体
    内存分配
  • 原文地址:https://www.cnblogs.com/yxfboke/p/10214429.html
Copyright © 2011-2022 走看看