我在 react-redux 小测试中得到“无法读取未定义的属性 'cart'”

Posted 2023-03-16

【中文标题】我在 react-redux 小测试中得到“无法读取未定义的属性 \'cart\'”

【英文标题】：I get “Cannot read property 'cart' of undefined” in a react-redux little test我在 react-redux 小测试中得到“无法读取未定义的属性 'cart'”

【发布时间】：2021-04-02 08:39:06

【问题描述】：

拜托，谁能帮我做这个测试

我编写了一个简单的 react-redux 示例，其中有一个产品列表，用户可以用它来填充购物车。 我创建了一个减速器，比如

const cartReducer = (prevState = storeInitialState, action)

initialState 在哪里

export const storeInitialState = 
    forSale: GROCERY_ITEMS,
    cart: []

forSale 是要出售的产品，cart 是用户在购物车中的产品

通过使用 redux 执行 chrome 开发人员工具，我可以看到该状态有正确销售的产品，但是在尝试显示它们时，我得到“无法读取未定义的属性 'cart'”

在显示购物车中产品的组件中，我输入了：

function mapStateToProps(state) 
    return 
       productsInCart: this.state.cart
    
 
 
 function mapDispatchToProps(dispatch) 
    return 
        removeFromCart: (index) => dispatch(removeFromCartActn)
    
 
 
 export default connect (mapStateToProps, mapDispatchToProps)(GroceryCart)

然后，我通过遍历 jsx 中的产品来展示产品：

this.props.productsInCart.map((productInCart, index) => 
                                return (
                                    <tr key=index>
                                        <td>productInCart.name</td>
                                        <td>productInCart.price</td>...

这是我收到错误“无法读取未定义的属性 'cart'”的地方

function mapStateToProps(state) 
    return 
       productsInCart: this.state.cart
    
 

状态好像是未定义的，为什么呢？

提前谢谢你

拉斐尔

【参考方案1】：

在mapStateToProps 中你应该只使用state.cart，而不是this.state.cart：

function mapStateToProps(state) 
    return 
         productsInCart: state.cart,
    ;

mapStateToProps 中的this 指向一个窗口对象，所以this.state 可能是undefined。