關於`React Hook useEffect has a missing dependency`的解決辦法(血淚版)

限於網上那些不講業務的解決辦法，在踩了一堆堆的坑後，還是決定應該寫出來，順帶記錄下useeffect的使用辦法
講真，只有徹底解決這個告警，才能明白react函數式編程的開發方式。

凡是不講業務場景的解決辦法全是耍流氓

場景1：頁面初始化時發起請求

useState + useEffect + useRef

import { useState, useEffect, useRef } from 'react'
export default function MyComp({year}) {
// 場景：不依賴year的值發起請求，僅作爲參數傳值，因而使用useref即可
const yearRef = useRef(null)
yearRef.current = year
  const [form] = useForm() 
 useEffect(() => {
    if (!form) return
    if (!yearRef.current) return
    ajax.post('xxx',{year:yearRef.current}).then(res => {
        form.setFieldsValue({...res})
    })
  }, [form])
}

場景2 監聽某些值，觸發某個函數

useRef + useState + useCallback + useEffect

思路：useCallback參數2監聽依賴值，參數1是執行這些依賴發生變化時的函數，useEffcet監聽這個函數，一旦觸發即執行
對於props的數據的處理:
如果需要根據其變化觸發函數，則將其寫入到useCallback參數2裏，注意要避免空值下的請求;
如果不需要根據其變化觸發，則可以用useRef.current鏈接該prop，從而在函數裏使用而不會觸發題目;

import { useState, useEffect, useRef, useCallback,forwardRef, useImperativeHandle} from 'react'
const NumberTable = forwardRef(({ year, sendTotalNum, Type}, ref) => {
useImperativeHandle(ref,()=>({getAjax}))
    // 不需要動態監聽year時，就使用yearRef鏈接這個值，避免getAjax函數使用state以內且沒在參數2內的數據
  const yearRef  = useRef(null)
  yearRef.current = year
// 對於要發送給父級的事件，直接使用useRef鏈接，
const sendTotalNumRef = useRef(null)
sendTotalNumRef.current = sendTotalNum
const [sta,setSta] = useState('')
  const getAjax = useCallback(()=>{
    ajax('xxx/xx',{year:yearRef.currnet}).then(res=>{
        sendTotalNumRef?.current && sendTotalNumRef?.current(res)       
         setSta(res) 
    })
  },[year,Type])                                
  useEffect(()=>{
    getAjax()
  },[getAjax])                                                
                                    
}))

大概寫了這麼點，上面的例子可以看下，希望可以有些許幫助。