为什么我的 Redux Store 对象数组没有更新？

问题描述

我对 React 和 Redux 非常陌生。我正在尝试使用 Redux 构建简单的购物车功能。我已经阅读了 Redux Troubleshooting，许多关于 SO 和其他地方的解决方案。我花了很多时间在上面，但无法找出原因。

问题：

我正在从一个按钮分派 INCREASE 操作，我试图通过该按钮将整个有效负载对象附加到（最初）空的购物车数组中。当我按下按钮时 console.log() 我的购物车时，它显示该对象已成功添加到购物车数组中。但是当我检查购物车组件时，购物车没有在那里更新并显示它是空的，当我重新加载我的页面时也会发生同样的情况。在我看来，尽管 console.log() 显示我没有更新，但 state.cart 似乎没有更新。

我的 Redux Store 是：

import { createStore } from "redux";
import reducer from "./Reducer";
import { Provider } from "react-redux";
//initial store
const initialStore = {
  services: Servicesdata,//saves the offered services displayed on the salon service page
  cart: [],// intended to be array of objects
  bill: 0,total_items: 0,//saves total items in the cart
};

我的 Reducer.js 文件中的操作是：

import { DECREASE,INCREASE,CLEAR_CART,REMOVE } from "./Actions";
function reducer(state,action) {
    let tempCart = [...state.cart,action.payload];

    console.log("Payload is:",action.payload);
    console.log("Updated state is:",state);
    console.log("Updated Cart is:",tempCart);

    return {
      ...state,cart: tempCart,};
  }
  return state;
}

这是按钮所在的 Services.jsx：

import React from "react";
import { connect } from "react-redux";
import { INCREASE } from "./Actions";

const ServicesCard = ({
  //   id,serviceName,serviceDesc,price,increase,}) => {
  return (
    <>
      <div className="col-md-6">
        <div className="package">
          <h5>{serviceName}</h5>
          <p>{serviceDesc}</p>
          <strong className="price">
            <small>Rs.</small>
            {price}
          </strong>
          <button
            className="addToCart"
            // onClick={() => dispatch({ type: INCREASE })}
            onClick={() => increase()}
          >
            Add
          </button>
        </div>
        {/* end package */}
      </div>
      {/* end col-md-6 */}
    </>
  );
};

// const mapStatetoProps = (state) => {
//   const { cart,amount,total } = state;
//   return { cart,total };
// };

const mapdispatchToProps = (dispatch,ownProps) => {
  const { id,price } = ownProps;
  //   console.log("ownProps: ",ownProps,id,price);
  return {
    increase: () =>
      dispatch({
        type: INCREASE,payload: { id,price },}),};
};

export default connect(null,mapdispatchToProps)(ServicesCard);

这是Cart.jsx文件的相关代码：

import React from "react";
import Nav from "./Nav";
import { connect } from "react-redux";
import { CLEAR_CART } from "./Actions";
import CartCard from "./CartCard";

    const Cart = ({ cart = [],bill,dispatch }) => {
      // console.log(cart);
      if (cart.length === 0) {
        return (
          <React.Fragment>
            <Nav />
            <header className="cart-header">
              <h2>Your Cart</h2>
              <h4>is currently empty</h4>
              {console.log("In Cart component: ",cart)}
            </header>
            <br />
          </React.Fragment>
        );
      } else {
        return (
          <React.Fragment>
            <Nav />
            <header className="cart-header">
              <h2>Your Cart</h2>
              <h4>is Full</h4>
            </header>
            <br />

            <div className="cart-items">
              {console.log("In Cart component: ",cart)}
              {cart.map((cartItem) => {
                return <CartCard key={cartItem.id} {...cartItem} />;
              })}
            </div>
            <br />
            <div className="cart-total">
              <h4>
                Total: <span>Rs. {bill}</span>
              </h4>
            </div>
            <div className="cart-actions-section">
              <button
                id="clear-cart-button"
                className="cart-buttons"
                onClick={() => dispatch({ type: CLEAR_CART })}
              >
                Clear Cart
              </button>
            </div>
            <br />

          </React.Fragment>
        );
      }
    };
    
    const mapStatetoProps = (state) => {
      const { cart,quantity,bill } = state;
      console.log("cart in mapState:",cart);
      return { cart,bill };
    };
export default connect(mapStatetoProps)(Cart);

请帮助我了解此问题的原因。谢谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）