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

有什么解决办法吗？

标签： javascriptreactjsreact-hooksuse-effectusecallback

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.