React Redux - 无法设置未定义的属性“数量”

Question

我正在使用 React、Redux 和 React-Router 构建一个电子商务网站。到目前为止，我有一个包含所有商品的主页和一个将商品添加到购物车的链接。每个商品的商品详情页都有<Link>s，并且这个商品详情页还有一个“加入购物车”按钮。

我需要addToCart 操作来获取正在查看的商品的 ID，并将其添加到购物车。我的问题是，在项目详细信息页面上，当单击“添加到购物车”按钮时，我收到 cartReducer.js 文件的此 TypeError：TypeError: Cannot set property 'quantity' of undefined

这只发生在商品详情页面，而不是主页。我感觉这与所有项目都是从主页上的map() 函数呈现的事实有关...？

在项目详细信息页面上，项目基于从主页的<Link> 传递的道具（location.state）呈现。我不知道如何将项目 ID 从 URL 传递到 addToCart 操作而不引发错误。

---

这是我迄今为止尝试过的：

• 在mapStateToProps 中使用ownProps（此处建议How to sync Redux state and url query params 和此处What is ownProps in react-redux?）下面的代码是我离开的地方，但我尝试过以不同方式使用ownProps：

Item.js

const mapStateToProps = (state, ownProps) => {
    return {
        items: state.items,
        id: ownProps.id === state.id
        // I've also tried id: ownProps.id
    };
}

我意识到尝试上述方法对我不起作用，因此我将ownProps 完全从Item.js 中的Item.js 中取出。

• 确保调度的动作/事件处理程序被正确绑定（我参考了这篇文章：https://www.freecodecamp.org/news/the-best-way-to-bind-event-handlers-in-react-282db2cf1530/）。

我今天阅读了许多其他关于此主题的 SO 问题和答案以及信息性文章，但我忘记了我所引用的所有内容。

我只是不明白为什么项目 ID 不能从 Item.js 传递给减速器，但它对 Home.js 非常有效

---

我已经把代码放在codesandbox这里：

https://codesandbox.io/s/github/thesemdrnsocks/redux-co

到目前为止，这是我的代码：

Item.js（呈现商品详情页面 - 无法从此组件将商品添加到购物车）

import React from 'react';
import { connect } from 'react-redux';
import {
    Link,
    withRouter
} from 'react-router-dom';
import { addToCart } from '../../actions/CartActions';

const mapStateToProps = (state, ownProps) => {
    return {
        items: state.items,
        id: ownProps.id === state.id
    };
}

const mapDispatchToProps = (dispatch) => {
    return {
        addToCart: (id) => { dispatch(addToCart(id)) }
    };
}

class Item extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            item: this.props.location.state,
        }

    }

    handleAddToCart = (id) => {
        this.props.addToCart(id);
    }

    render() {
        const item = this.state.item;
        return (
            <div className="item-details" key={item.id}>
                <div className="item-details-img">
                    <img src={item.img} alt={item.title} />
                </div>
                <div className="item-details-info">
                    <p className="item-details-title">{item.title}</p>
                    <p className="item-details-price"><b>${item.price}</b></p>
                    <p className="item-details-desc">{item.desc}</p>
                    <div className="item-details-add-to-cart">
                        <Link to="/cart" onClick={ () => { this.handleAddToCart(item.id) } }>
                            <button>Add to Bag</button>
                        </Link>
                    </div>
                </div>
            </div>
        );
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(withRouter(Item));

Home.js（呈现主页，其中显示商店中的所有商品——从此处将商品添加到购物车）

import React from 'react';
import { connect } from 'react-redux';
import {
    Link,
    withRouter
} from 'react-router-dom';
import { addToCart } from '../actions/CartActions';
import Item from './shopping/Item';

const mapStateToProps = (state) => {
    return {
        items: state.items
    };
}

const mapDispatchToProps = (dispatch) => {
    return {
        addToCart: (id) => { dispatch(addToCart(id)) }
    };
}

class Home extends React.Component {
    handleAddToCart = (id) => {
        this.props.addToCart(id);
    }

    render() {
        let itemList = this.props.items.map(item =>{
            return (
                <div className="home-item-card" key={item.id}>
                    <div className="home-item-image">
                        <Link to = 
                            {{ pathname: `/products/${item.category}`,
                            search: `?id=${item.id}`,
                            state: {
                                id: `${item.id}`,
                                img: `${item.img}`,
                                title: `${item.title}`, 
                                desc: `${item.desc}`,
                                price: `${item.price}`
                            } }}
                            component={ Item }>
                                <img src={item.img} alt={item.title} />
                        </Link>
                    </div>
                    <div className="home-item-info">
                        <span className="home-item-title">{item.title}</span>
                        <Link to="/" className="home-add-item" onClick={() => 
                            { this.handleAddToCart(item.id) } }>
                            <i class="fa fa-plus-circle"></i>
                        </Link>
                        <p className="home-item-price"><b>${item.price}</b></p>
                        <p className="home-item-desc">{item.desc}</p>
                    </div>
                </div>
            )
        })

        return (
            <div className="home-new-arrivals">
                <h1>What's new?</h1>
                <div className="new-arrivals-items">
                    {itemList}
                </div>
            </div>
        );
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(withRouter(Home));

cartReducer.js（摘录）

const initState = {
    items: ShopContent,
    addedItems: [],
    total: 0
}

const cartReducer = (state = initState, action) => {
    // If item is added to cart...
    if (action.type === ADD_TO_CART) {
        let addedItem = state.items.find(item => item.id === action.id);
        let existedItem = state.addedItems.find(item => action.id === item.id);

        // Check if item already exists in cart
        // If item is already in cart, increase quantity by 1, and calculate total
        if (existedItem) {
            addedItem.quantity += 1;
            return {
                ...state,
                total: state.total + addedItem.price
            }
        } else {
            // Add item to cart and calculate total
            addedItem.quantity = 1;
            let newTotal = state.total + addedItem.price;
            return {
                ...state,
                addedItems: [...state.addedItems, addedItem],
                total: newTotal
            }
        }
    }

/* ... the rest of the reducer covers changing quantity of items
in cart and adding/removing shipping from the cart total */

ShopContent.js（摘录；保存商品信息）

import Item1 from '../images/item1.png';
// ... followed by more imports for each item's image

export const ShopContent = [
    { 
        id: 1, 
        title: 'Black Eyelet Dress', 
        desc: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
        price: 120,
        img: Item1,
        category: 'dresses',
        sale: false
    },
// ... followed by more items...

Answer 1

您的问题是您在传递给Item 组件时改变了item.id 的数据类型。您将所选项目作为字符串放入位置历史记录中。但是然后在 reducer 中对整数执行 === 到字符串，这将不起作用。 （又名1 === '1'）。

<Link to={
  { pathname: `/products/${item.category}`,
    search: `?id=${item.id}`,
    state: {
      id: `${item.id}`,
      img: `${item.img}`,
      title: `${item.title}`, 
      desc: `${item.desc}`,
      price: `${item.price}`
    }
  }}
  component={ Item }
>
  <img src={item.img} alt={item.title} />
</Link>

有几种方法可以解决此问题。
1.Pull the item from your actual state based on the id in the URL.
2. 调度一个活动项目操作，用您正在查看的活动项目更新您的减速器。

我认为第一个选项非常简单，对代码的更改更少，这就是它的样子。

// Home
<Link
  to={{
    pathname: `/products/${item.category}`,
    search: `?id=${item.id}`
  }}
  component={Item}
>
  <img src={item.img} alt={item.title} />
</Link> 

然后在项目中，

// Item
constructor(props) {
  super(props);
  let currentItemId = new URLSearchParams(window.location.search).get("id");
  if (currentItemId) {
    currentItemId = parseInt(currentItemId, 10);
  }
  this.state = {
    item: props.items.find(item => item.id === currentItemId)
  };
}

Answer 2

我确实感觉这就是您的问题所在，您正在将 boolean 值传递给 id 道具。它应该是ownProps.id 或state.id

const mapStateToProps = (state, ownProps) => {
    return {
        items: state.items,
        id: ownProps.id === state.id
    };
}