Javascript 反作用效果不'；t在其他组件的值更改后更新

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

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()]);
  //},[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>
    </>
  );
}

---

React之所以称为React，是因为它在对更改的内容作出反应时会重新渲染

为了实现这一点，react组件需要知道，不知何故，某些东西发生了变化

在您显示的代码示例中，

totalCount

（由导出函数

getTotalCount

提供的全局访问）独立于react组件树，因此数据可以在react不知道的情况下更改

所以，问题是：如何让您的react组件意识到这些更改

存在一些机制，以下是其中一些机制：

使用全局状态管理器（如redux），使用redux操作和reducer来改变状态，并在组件中使用选择器（使其知道任何更改），然后重新加载

保持购物车状态的React上下文。该上下文既可以导出该数据，也可以导出将改变数据的函数，以便可以在访问该上下文提供程序的组件之间共享这些数据

可以通过以下方式在组件中使用您的上下文：

const cartContext=useContext（cartContext）
const{cartState，addToCart，removeFromCart}=cartContext
const{totalCount，inTheCart}=cartState
[…以后在哪里…]
removeFromCart（index）}>{inTheCart[index].name}
{${totalCount}项`}

---

我允许您围绕现有函数构建上下文对象；）

一个简单的解决方案是提升状态。在布局文件中创建状态，从中

标题

和

购物车

可以访问

计数

作为

道具

<当组件的

状态

或

道具

发生更改时，将调用code>useffect。

/}，[count]）将导致无限循环，因为每次发生useffect时，都会调用重新渲染器，因此初始值为0？我的意思是getTotalFunction总是返回0。是吗？是的，在myCart.js中，正如您看到的totalCount为0，在开始时，这是否回答了您的问题？好的，我会尝试用Redux重做它，如果myCart.js的所有内容都是在该组件中使用UseStateAPI完成的，那么它就可以工作了。在这种情况下，导航栏将不需要任何效果，他们可以只使用totalCount道具。它将在每次更改时重新加载。限制是，如果另一个组件需要该状态，它必须是该父组件的直接子组件。或者，如果有很多中间组件，你需要到处“钻”这些道具。对于简单用例来说仍然是一个很好的解决方案。是的，你是对的。这完全取决于你的情况。如果您想在多个位置访问计数，并且不想钻取道具，那么使用

Context-API

或

Redux

将是一个不错的选择。

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