Javascript 在React中其他组件的值发生更改后，useEffect不会更新

我试图为自己做一些网上购物，但我遇到了一个问题。 我想在

NavBar

组件中呈现我的购物车大小（每个页面上都有）

我创建了一个购物车项目服务，在其中我放置了所有添加的项目，它还具有以下功能：

添加项目

，

删除项目

，

获取购物车

，

获取购物车大小

当我单击特定产品上的添加/删除时，我希望根据购物车大小（从

getCartSize

方法）更改带有购物车大小的

NavBar

上的值。我已经尝试使用

useffect

hook，但它无法识别

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>
    </>
  );
}

---

看起来像是状态管理的一个坏例子！！基本上，您正在尝试访问组件之间的共享状态，您应该做的是使用状态管理方法（提升状态，使用redux-mobx之类的库，使用钩子上下文，…）。不要从js文件（myCard.js）中导出变量和函数，而是创建一个CardStore/CardContext文件……等等，这是“状态管理”共享状态的方法吗？这是否回答了您的问题？

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;
}