解决select(antd-design组件库)默认选中请求数据的第一项。

出现这种问题的原因:一般我们的select的下拉项的数据都是请求接口出来的,但是会出现这样问题,请求数据是需要一定的时间(比如这个接口是异步请求),可能接口还没请求出来页面都已经渲染完成了。那么等这个接口请求出来,默认选中第一项也就不会再生效了。

解决方式:一般这个下拉菜单接口的数据是这样的形式,list:[{id:1,value:'中国',...},{id:2,value:'美国,...'}]。当页面初始化的时候,我们可以进行判断,如果接口数据请求出来了,并且我们没有选择下拉框选项的时候,就把路由重置到第一项的id。当我们选中某一项的时候,我们把路由重置到该项的id。

核心代码:

// 初始值
  const [applicationId, setApplicationId] = useState(Number(match?.params.applicationId));
//初始化进入页面的时候
useEffect(() => {
    if (!id && list.length > 0) {
      history.replace(`/domestic/personalizedRecommendation/${list[0].id}`);
    }
  }, [appList]);
  // 改变select的回调
   const handleChangeApp = (id) => {
    history.replace(`/domestic/personalizedRecommendation/${id}`);
    setApplicationId(id);
  };

// 路由页面

/domestic/personalizedRecommendation/:id

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值