IT技术 - 在 React 中 useEffect 在值从其他组件更改后不会更新 - 吾爱随笔录

我正在尝试为自己做某种在线商店，但遇到了问题。我想在NavBar组件中呈现我的购物车大小（在每个页面上）。

我创建了一个 Cart Items 服务，用于放置我添加的所有项目，并且它还具有addItem、removeItem、getCart、的功能getCartSize。

当我单击特定产品上的添加/删除时，我希望NavBar购物车尺寸的值会根据购物车尺寸（来自getCartSize方法）而变化。我已经尝试使用useEffect钩子，但是它无法识别何时cartSize更改了值，我该怎么做？

这是我已经做的。

navbar.jsx：

//...
//...
import {getTotalCount} from '../../services/myCart';

export default function Navbar() {
  // ...
  const [count, setCount] = useState();  

  useEffect(() => {
    setCount(getTotalCount());
    console.log('counto useeffect');
  },[getTotalCount()]);


  return (
    <>
        <header className="navbar">
                <Link className="navbar__list-item__home-icon" to="/"><span><FaHome/></span></Link>
                <Link className="navbar__list-item" to="/products">Products</Link>            
                <h2>cart size--> {count}</h2>
                <Link className="navbar__list-item__cart-img" to="shopping-cart"><span><FaShoppingCart/></span></Link>   
        </header>
    </>
  );
}

myCart.js 所有功能都可以正常工作，当我在产品页面的组件上单击添加/删除按钮时，我会调用它们。

var InTheCart = [

];
var totalCount = 0;

export function AddToCart(item) {
    // ... logic
    totalCount++;
}

export function ContainsInTheCart(id) {
    return InTheCart.findIndex(x=> x.item.id == id) != -1 ? true: false;   
}

export function RemoveFromCart(id) {
   // ... logic
        totalCount--;
}

export function getCart() {
    return InTheCart;
}

export function getTotalCount() {
    return totalCount;
}