React中useCallback钩子缺失依赖(props)错误及循环问题求助

嘿，作为React初学者碰到这种依赖循环的问题太正常了，我来帮你理清思路并解决它！

问题根源 #

你遇到的循环问题本质是：updatedCartForCheckoutHandler是在App组件中定义的普通函数，每次App组件重渲染时，这个函数都会被重新创建。当你把它加入Navbar组件中getCartInfo的useCallback依赖数组后，getCartInfo的引用会跟着变化，进而触发依赖它的useEffect重新执行，而getCartInfo里又会调用updatedCartForCheckoutHandler导致App组件状态更新，最终形成循环。

同时，ESLint的exhaustive-deps规则要求你必须把useCallback内部用到的所有外部变量/函数加入依赖数组，所以才会报缺失依赖的错误。

解决方案：让回调函数引用稳定 #

我们可以用useCallback包裹App组件中的updatedCartForCheckoutHandler，让它的引用保持稳定，这样就不会因为App重渲染而频繁变化，打破循环。

1. 修改App.js中的回调函数

// App.js
import { useState, useCallback } from 'react';

const [updatedCartForCheckout, setUpdatedCartForCheckout] = useState(null);
// 用useCallback包裹，让函数引用稳定
const updatedCartForCheckoutHandler = useCallback((updatedCart) => {
  setUpdatedCartForCheckout(updatedCart);
}, [setUpdatedCartForCheckout]); // setState函数是React稳定提供的，不会变化

return (
  <>
    <Navbar cartDataFromStoreFront={cartData} updatedCartForCheckout={updatedCartForCheckoutHandler} />
    <Route path="/checkout">
      <Checkout updatedCartForCheckout={updatedCartForCheckout} />
    </Route>
  </>
);

2. 更新Navbar.js中的useCallback依赖

现在updatedCartForCheckout的引用已经稳定了，可以安全地加入getCartInfo的依赖数组：

// Navbar.js
const getCartInfo = useCallback(() => {
  const cartData = JSON.parse(localStorage.getItem("cartDetails"));
  if (cartDataFromStoreFront || cartData) {
    getCart(
      cartDataFromStoreFront ? cartDataFromStoreFront.cartId : cartData?.cartId || false
    )
      .then((response) => {
        if (response.data.status === "success") {
          setCartDetails(response.data.data);
          props.updatedCartForCheckout(response.data.data);
          if (response.data.data.items.length < 1) {
            localStorage.removeItem("cartDetails");
          }
        }
      })
      .catch((error) => {
        if (error?.response?.data?.message) {
          console.log(error.response.data.message);
        }
      });
  }
}, [cartDataFromStoreFront, props.updatedCartForCheckout]); // 加入稳定的updatedCartForCheckout

useEffect(() => {
  window.$("#slide-cart").hide();
  setIsAuthenticated(!!tokenFromLocalStorage || !!token);
  getCartInfo();
}, [tokenFromLocalStorage, token, getCartInfo]);

为什么这样有效？ #

• useCallback会缓存updatedCartForCheckoutHandler的引用，只有当它的依赖项（这里是setUpdatedCartForCheckout）变化时才会重新创建，而React保证setState函数的引用是始终稳定的，所以这个handler不会频繁变化。
• 当getCartInfo的依赖数组加入这个稳定的handler后，getCartInfo的引用也不会无故变化，useEffect就不会反复触发，循环也就被打破了。

额外提示 #

虽然你可以用// eslint-disable-next-line react-hooks/exhaustive-deps来忽略这个警告，但这是不推荐的做法——它可能导致你的回调函数捕获到过时的变量，引发难以排查的bug。让依赖项保持清晰且稳定才是最佳实践。

内容的提问来源于stack exchange，提问作者Jeesmon Joy