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

【问题标题】：Why cart React-Redux doesn't update?为什么购物车 React-Redux 不更新？
【发布时间】：2020-12-17 16:34:41
【问题描述】：

我正在使用 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());
  };
}:

然后是reducer代码：

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）是否已经在购物车中，如果没有将产品添加到购物车（工作正常）。如果产品已经在购物车中，只需更新金额（无效）。

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

ps。忍受我，我是一名初级开发人员。我不知道基于类的 react 或 mapStateToProps。

【问题讨论】：

请自带一个可以工作的sn-p，如果你有一个sn-p可以清楚地显示你的问题，它会比没有sn-p更快地解决你的问题，例如，你可以从代码沙箱创建一个 sn-p

标签： javascript reactjs redux react-redux

【解决方案1】：

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

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

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

【讨论】：