在用React开发的时候我遇到一个很奇怪的问题
console.log(changeselect) // 3
setChangeselect(changeselect -1)
console.log(changeselect) // 3
也是第一次遇到这个问题 但是也知道原因 估计是因为异步的原因
我们知道修改useState的值是异步的
问题找到了怎么解决呢
首先我先用了 async awaite (无法实现)
async function onPrevious() {
//获取到当前项是第几项 然后减去1 然后获取到时间之后 调用接口
if(changeSelectRef.current>0){
console.log(changeselect) // 3
awaite setChangeSelect(changeSelect - 1)
console.log(changeselect) // 3
}else{
Message({ content: "已经是第一个了", style: { marginTop: '80px' } })
}
}
这个方法无效 一时间毫无头绪
最后我用的方法就是用useRef
要注意 如果直接使用你定义的useRef是会爆红的
要使用useRef.current方法
上代码
const changeSelectRef = useRef(3);
if(changeSelectRef.current>0){
console.log(changeSelectRef.current),"---------------->"); //3
changeSelectRef.current=changeSelectRef.current -1
console.log(changeSelectRef.current),"---------------->");//2
}
最后就完美解决啦