React 上下文更改未显示

Question

我设置了这个组件，我在其中使用全局上下文来跟踪我的购物车。然而，当 cartQty 更新时，我没有在屏幕上看到更新的数量，只有当我刷新页面时才会看到。

const CartBody = () => {
  const { cart, setCart } = useGlobalContext();

  const increaseCartQty = (productName: any) => {
    const index = cart.findIndex((product) => product.name === productName);
    cart[index].quantity = cart[index].quantity + 1;
    setCart(cart);
  };

 return (<div>{cart.quantity}</div>)
}

Answer 1

您正在改变状态而不是创建新状态。当您在功能组件中设置状态时，react 会在旧状态和新状态之间执行 ===。如果它们相等，则跳过渲染。

改为这样做：

const increaseCartQty = (productName: any) => {
  const index = cart.findIndex((product) => product.name === productName);
  const newCart = [...cart];
  newCart[index] = {
    ...cart[index],
    quantity: cart[index].quantity + 1,
  };
  setCart(newCart);
};

或者：

const increaseCartQty = (productName: any) => {
  const newCart = cart.map((product) => {
    return product.name === productName
      ? {
          ...product,
          quantity: product.quantity + 1,
        }
      : product;
  });
  setCart(newCart);
};

React 上下文更改未显示

React Context changes not showing

reactjs

react-context