Question

我正在学习如何通过查看示例手动构建一个非常简单的购物车，并且设法在我的示例站点上成功地找到了一些东西，没有出现错误。这是购物车组件：

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 数组并看到它被添加到。有没有人对如何解决这个问题有任何建议？如果需要，我可以提供更多代码。

Answer 1

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

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

您需要使用扩展语法或 push 创建 array 的副本。

concat()

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

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

React/Redux 购物车未更新

1 个答案: