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