我正在尝试为自己做某种网上商店，但我遇到了问题。 我想在NavBar组件(每个页面上(中呈现我的购物车大小。
我创建了一个购物车项目服务，我在其中放置了所有添加的项目，它还具有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()]);
//},[getTotalCount]); doesn'work also.
//},[count]); doesn'work also.
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;
}
React 之所以被称为 act，是因为当它对更改的内容做出反应时，它会重新渲染。
为此，反应组件需要以某种方式知道某些事情发生了变化。
在您展示的代码示例中，totalCount(导出函数getTotalCount提供的全局访问(独立于 react 组件树，因此数据可以在 react 不知道的情况下进行更改。
所以，问题是：如何让你的反应组件意识到这些变化？
存在一些机制，以下是其中的一些：
使用像 redux这样的全局状态管理器，带有 redux 操作和化简器来改变组件中的状态和
useSelector，使它们知道任何更改，并重新渲染反应上下文，它将保存购物车状态。该上下文可以导出该数据和将更改数据的函数，以便可以在有权访问该上下文提供程序的组件之间共享它们。
您的上下文可以通过以下方式在组件中使用：
const cartContext = useContext(CartContext)
const { cartState, addToCart, removeFromCart } = cartContext
const { totalCount, inTheCart } = cartState
[...somwhere later...]
<ul><li onClick={() => removeFromCart(index)}>{inTheCart[index].name}</li></ul>
<footer>{`${totalCount} items`}</footer>
我让你围绕现有的函数构建上下文对象;)
一个简单的解决方案是提升状态。在布局文件中创建状态，Header和Cart可以从中以Props访问count。 每当组件的state或props发生更改时，都会调用useEffect。