React Hook useEffect/useCallback 缺少依赖项

Question

我的 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 依赖项。 当我这样做时，我再次进入无限循环。

有什么解决办法吗？

Answer 1

将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中。