antd Select将默认值defaultValue设为后端拉取数据的对象属性值时报undefined

在使用Ant Design的Select组件时,若将defaultValue设置为后端拉取数据对象的属性值,可能会遇到初始加载时value为undefined的错误。原因在于defaultValue在组件挂载时仅读取一次数据,而数据可能在组件渲染前还未获取到。解决方案是在数据未获取到时避免渲染Select组件,确保defaultValue能读取到存在的数据。
摘要由CSDN通过智能技术生成

问题:从后端拉取到数据放到sourceList数组中,每个item都是对象,在获取对象的value属性值时一直报错显示value为undefined

原因:defaultValue只会读取一次数据,页面刚进来的时候在componentDidMount中调用接口传来的数据,但是render会在componentDidMount之前调用,在页面刚进来的时候第一次render的时候数据还没有拿到,此时sourceList为undefined,所以defaultValue首次读取到的sourceList为空并不会报错只会没有任何显示(取null数据类型存在),但对为空值的sourceList取它的属性值value对应数据时,就会报错并显示为undefined(取null值的value必然是会报错的,数据类型不存在)

解决方法:判定如果当前sourceList[0]不存在的话,就直接return出去不渲染组件,等到有值了,defaultValue第一次读取的数据值是存在的,就可以正确显示出来

let {sourceList}=this.props.SourceReducer
        if(!sourceList[0]){
            return(<div></div>)
        }
        return(
            <Select defaultValue={sourceList[0].value} style={
  
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值