React 函数组件 离开页面清除定时器 useRef()

页面需求：

页面有一个下拉框，用于给请求接口的参数赋值；每隔一定时间就要重新请求接口，刷新页面数据；离开页面，清除定时器。

想法一：

const [interval,set_interval]=useState(null)
useEffect(()=>{
    getSelectDataInterface().then((res)=>{
        if(成功){
            ...
            set_interval(
                setInterval(function(){
                  getPageDataFunc(下拉框初始值)  
                },10000)
            )
        }else{
            ...
        }
    })
    return ()=>clearInterval(interval)
},[])

const getPageDataFunc=(params)  =>{//获取页面数据的方法
    getPageDataInterface().then(res=>{
        if(成功){
            ...
        }else{
            ...
        }
    })
}

const selectChange=(val,opt)=>{//选择器值改变触发的方法
    getPageDataFunc(val)
    clearInterval(interval)
     setInterval(function(){
          getPageDataFunc(下拉框初始值)  
     },10000)
    ...
}

这样做，页面退出的时候，可以清除定时器，但是在选择器改变值的时候，清除不了

想法二：

let interval=null
useEffect(()=>{
    getSelectDataInterface().then((res)=>{
        if(成功){
            ...
            interval=setInterval(function(){
              getPageDataFunc(下拉框初始值)  
            },10000)
        }else{
            ...
        }
    })
    return ()=>clearInterval(interval)
},[])

const getPageDataFunc=(params)  =>{//获取页面数据的方法
    getPageDataInterface().then(res=>{
        if(成功){
            ...
        }else{
            ...
        }
    })
}

const selectChange=(val,opt)=>{//选择器值改变触发的方法
    getPageDataFunc(val)
    clearInterval(interval)
    interval=setInterval(function(){
        getPageDataFunc(val)  
    },10000)
    ...
}

这样做，在选择器改变时清除定时器可以成功，但是离开页面时清除失败

网上找到的方法：

let interval=useRef(null)
useEffect(()=>{
    getSelectDataInterface().then((res)=>{
        if(成功){
            ...
            clearInterval(interval.current)
            interval.current=setInterval(function(){
              getPageDataFunc(下拉框初始值)  
            },10000)
        }else{
            ...
        }
    })
    return ()=>clearInterval(interval.current)
},[])

const getPageDataFunc=(params)  =>{//获取页面数据的方法
    getPageDataInterface().then(res=>{
        if(成功){
            ...
        }else{
            ...
        }
    })
}

const selectChange=(val,opt)=>{//选择器值改变触发的方法
    getPageDataFunc(val)
    clearInterval(interval.current)
    interval.current=setInterval(function(){
        getPageDataFunc(val)  
    },10000)
    ...
}