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])

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

有什么解决办法吗？

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。

React Hook useEffect/useCallback 缺少依赖项

React Hook useEffect/useCallback has a missing dependency

javascript

reactjs

react-hooks

usecallback

use-effect