关于`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])                                                
                                    
}))
 

大概写了这么点，上面的例子可以看下，希望可以有些许帮助。