时间戳

首页 > 解决方案 > 为什么购物车 React-Redux 不更新？

javascript - 为什么购物车 React-Redux 不更新？

问题描述

我正在使用 react-redux 构建购物车。我希望能够在添加数量（初始 1 件）之后将产品添加到购物车。如果用户想要它可以更新该数量（更高或更低）。

此时我不断遇到同样的问题，添加了一个产品，但用户无法再更新它。

调度代码

  function addToCart() {
    console.log(oneBox);

    dispatch(addCart(oneBox));
  }

然后是动作代码：

export const addCart = (oneBox) => {
  return async (dispatch, getState) => {
    dispatch(appLoading());

    const curCart = getState().cart;

    console.log(curCart);

    let productCart = { ...oneBox };

    productCart = { ...productCart, amount: 1 };

    if (!curCart.cart) {
      dispatch(addCartSuccess([productCart]));
    } else {
      if (parseInt(curCart.cart.map((cart) => cart.id)) === oneBox.id) {
        dispatch(updateCartSuccess(oneBox));
      } else {
        dispatch(addCartSuccess([productCart]));
      }
    }

    dispatch(appDoneLoading());
  };
}:

然后是减速器代码：

export default  (state = initialState, { type, payload }) => {

  switch (type) {
    case ADD_CART_SUCCESS:
      return { ...state.cart, ...payload };

    case UPDATE_CART_SUCCESS:
      console.log(payload);
      return {
        ...state,
        cart: state.cart.map((cart) => {
          if (cart.id === payload.id) {
            return {
              ...cart,
              amount: payload.amount + 1,
            };
          }

          return cart;
        }),
      };

它需要做的是首先检查发送的productid（oneBox）是否已经在购物车中，如果没有将产品添加到购物车（工作正常）。如果产品已经在购物车中，只需更新数量（不起作用）。

任何人都可以看到我在这里做错了什么？

附言。忍受我，我是一名初级开发人员。我不知道基于类的反应或 mapStateToProps。

标签： javascriptreactjsreduxreact-redux

解决方案

我认为当您将购物车与 oneBox 进行比较时，该行存在问题，因为调用parseInt数组只会解析第一个元素。我假设您想检查购物车中的 item.id 之一是否与 oneBox.id 匹配。这是一种方法

if (curCart.cart.filter((cart) => cart.id === oneBox.id).length) {
  dispatch(updateCartSuccess(oneBox));
}

上面的代码过滤与 oneBox.id 匹配的购物车。如果没有找到，那么它将产生长度为 0 的空数组（假）。如果找到，数组将大于 0（很可能是 1，这是真的）

推荐阅读