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

【问题标题】：In React useEffect does not update after the value has changed from other component在 React 中 useEffect 在值从其他组件更改后不会更新
【发布时间】：2020-03-30 14:21:29
【问题描述】：

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

【问题讨论】：

标签： javascript reactjs react-hooks use-effect

【解决方案1】：

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

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

代码也调用了像getTotalCount()这样的函数，但只需要名称，你不需要调用它。

希望对你有帮助！

【讨论】：