React Hook useEffect/useCallback 缺少依赖项

如何解决React Hook useEffect/useCallback 缺少依赖项

我的 ProductUpdate.js 文件中有此警告。

我的代码如下：

 const fetchProduct = () => {
      getProduct(slug)
      .then(p => setValues({...values,...p.data }))
    }
 
    useEffect(() => {
      fetchProduct()
      fetchCategories()
    },[])

警告说：

React Hook useEffect 缺少依赖项：'fetchProduct'。要么包含它要么删除依赖数组

但是当我将 fetchProduct 添加到依赖数组时，我进入了无限循环。

我尝试过 useCallback 钩子：

 const fetchProduct = useCallback(() => {
      getProduct(slug)
      .then(p => setValues({...values,...p.data }))
    },[]) 
 
    useEffect(() => {
      fetchProduct()
      fetchCategories()
    },[fetchProduct])

但是随后警告说要向 useCallback 添加 slug 和 values 依赖项。当我这样做时，我再次进入无限循环。

有什么解决办法吗？

解决方法

将 getProduct、slug 和 setValues 添加到回调依赖项数组应该可以：

const fetchProduct = useCallback(() => {
    getProduct(slug)
        .then(p => setValues(values => ({ ...values,...p.data })))
},[getProduct,slug,setValues])

useEffect(() => {
    fetchProduct()
    fetchCategories()
},[fetchProduct,fetchCategories])

遵循相同的模式将 fetchCategories 放入 useCallback。