React useState修改之后”不生效“问题

213 阅读1分钟

在用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
     }

最后就完美解决啦