React Hook useEffect 缺少依赖项

4,604 阅读1分钟

React Hook useEffect has a missing dependency

黄色预警

src/pages/MedicalService/MedicalManage/MedicalEdit/index.tsx
  Line 50:8:  React Hook useEffect has missing dependencies: 'getHosDetail' and 'type'. Either include them or remove the dependency array  react-hooks/exhaustive-deps
 useEffect(() => {
    if (type === 'detail' || type === 'edit') {
        getHosDetail()
    }
}, [])

image.png

报错信息是eslint提示的黄色预警,缺少依赖项 type是props获取到的,添加无效

官方建议解决方案

Either include them or remove the dependency array  react-hooks/exhaustive-deps

推荐的修复方案是把那个函数移动到你的effect内部

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

如下:

  1. 去除eslint检测 //eslint-disable-next-line react-hooks/exhaustive-deps
useEffect(() => {
    if (type === 'detail' || type === 'edit') {
        getHosDetail()
    }
    //eslint-disable-next-line react-hooks/exhaustive-deps
}, [type])
  1. 或者降方法放置在useEffect中
const { history, match } = props
const { type, id } = match.params

useEffect(() => {
    if (type === 'detail' || type === 'edit') {
        setPageLoading(true)
        medicalDetails(id).then((res: any) => {
            setFormData(res.data)
            setPageLoading(false)
        })
    }
}, [type, id])