Question

我正在尝试为自己做某种网上商店，但遇到了问题。我想在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()]);


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

Answer 1

在依赖项数组中，您只需要传递函数的名称，如下所示：

useEffect(() => {
   setCount(getTotalCount());
   console.log('count useEffect');
}, [getTotalCount]); // not like => getTotalCount()

代码还调用了getTotalCount()之类的函数，但只需要名称，您不需要调用它。

希望对您有帮助！

在React中，从其他组件更改值后useEffect不会更新

1 个答案: