出现这种问题的原因:一般我们的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