时间戳

首页 > 解决方案 > React/Redux 购物车未更新

reactjs - React/Redux 购物车未更新

问题描述

我正在通过查看示例来学习如何手动构建一个非常简单的购物车，并设法在我的示例站点上正确地安装了一些东西。这是购物车组件：

import React, { Component } from 'react';
import { connect } from 'react-redux';

class Cart extends Component{
    render() {
        return (
            <div>
                {this.props.items.length}
            </div>
        )
    }
}
const mapStateToProps = (state) => {
    return {
        items: state.items
    }
}

export default connect(mapStateToProps)(Cart);

当有人单击另一个组件上的按钮时，它应该运行减速器中的内容：

const initialState = {
    items : []
}

const cartReducer = (state = initialState, action) => {
    const newState = {...state};
    switch(action.type) {
        case "ADD_TO_CART":
            newState.items.push(action.item);
            break;
        default:
            return newState;
    }
    return newState;
}

export default cartReducer;

但是，每当我单击按钮时，我都无法看到购物车的this.props.items.length增加，即使我可以在控制台中记录 items 数组并看到它被添加到。有没有人对如何解决这个问题有任何建议？如有必要，我可以提供更多代码。

标签： reactjsreduxreact-redux

解决方案

您的组件不会重新渲染，因为与以前this.props.items相同array。你实际上并没有更新你的状态来拥有一个新的、修改过的数组。

你所做的是绝对不应该做的事情，就是对现有的state. newState.items与复制 的所有属性array相同。你不能调用它，因为它是一个变异操作。state.itemsnewStatestatepush()push

您需要array使用扩展语法或使用concat().

const cartReducer = (state = initialState, action) => {
    switch(action.type) {
        case "ADD_TO_CART":
            return {
                ...state,
                items: state.items.concat(action.item)
            }
        default:
            return state;
    }
}

您还可以使用Redux Toolkit帮助程序库，它允许您编写具有突变的化简器，从而使生活更轻松。

const cartSlice = createSlice({
  name: "cart",
  initialState: {
    items: []
  },
  reducers: {
    addToCart(state, action) {
      state.items.push(action.payload)
    },
  }
});

// action creator functions
export const { addToCart } = cartSlice.actions;

// reducer
export default cartSlice.reducer;

推荐阅读