Javascript Redux:addToCart功能只是更新数量，而不是将产品添加到购物车

我是Redux新手，因此很难解决代码中的问题，尤其是因为我没有错误

每当我将产品添加到购物车时，我的状态都会更新，但它只更新购物车的数量，而不会实际将产品添加到购物车

下面是我的Redux工具和相关代码片段的截图。

Card.js

import React, {useState} from 'react';


import 'antd/dist/antd.css';
import { Card, Avatar, Button, Modal } from 'antd';
import { EditOutlined, EllipsisOutlined, PlusCircleTwoTone, SettingOutlined } from '@ant-design/icons';
import {connect} from 'react-redux';
import {addToCart}  from '../Redux/Shopping/ShoppingActions'



const { Meta } = Card;



function Cardo(props) {
    const {addToCart} = props;


    //Setting variables up to use for useState so to manage state of modal
    //Default state is false so not to be visible
    const [isModalVisible, setIsModalVisible] = useState(false);

    const showModal = () => {
        setIsModalVisible(true);
    };

    const handleOk = () => {
        setIsModalVisible(false);
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };

    //^^^All the const's above will be called below within the card or modal to manage the state of the modal



    return (
        <div className="card">
            <Card
                style={{ width: "340px", textAlign: 'center' }}
                cover={<img className="card-cover" src={props.image}/>}
                actions={[
                    // <SettingOutlined key="setting" />,
                    // <EditOutlined onClick={showModal} key="edit" />,
                    <EllipsisOutlined onClick={showModal} key="ellipsis" />,
                ]}
            >
                <Meta
                    avatar={<Button className="card-button" onClick={() => addToCart(props.id)} type="primary" shape="circle"><PlusCircleTwoTone /></Button>}
                    title={props.header}
                    description={props.price}
                />
            </Card>
            <Modal title={props.header} visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                <p>{props.description}</p>
            </Modal>
        </div>
    )
}

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

export default connect(null, mapDispatchToProps)(Cardo)

MenuData.js（保存存储在产品中的数据）

MyMenu.js（卡片映射的位置）

---

似乎您在某些地方错误地使用了某些es6函数，并且代码中存在一些错误

state.cart.find((item) => item.id === action.payload.id ? true : false);

这一行将返回一个Cart对象，而不是布尔变量，不管怎样，它都可以在您的情况下工作

主要问题可能来自同一范围内的同一变量名。尝试使映射循环变量名与下面的不同

            return{
                //we spread the state first so not to lose current or all the products
                ...state,
                //inCart we check if it is in cart and that return true - if so map through cart and find that id
                cart: inCart ? state.cart.map((it) =>
                     it.id === action.payload.id 
                     //Then spread all of data inside and change quantity if needed
                        ? {...item, qty: item.qty + 1} : item
                        ) //if not in cart then spread the array and add the item and quantity to state of cart 
                        : [...state.cart, { ...item, qty: 1}],
            };

---

不确定，这是正确的答案，我希望这个答案对您有所帮助。

我知道，它对我很有用。如果减速机在

状态.products

数组中找不到与

操作.payload.id

匹配的

项，则您将看到预期的行为。所以，想一想你为什么找不到匹配的产品。谢谢你花时间，琳达，当你说对你来说很好的时候，你的意思是当你复制它的时候，它实际上会把一个产品添加到篮子里吗？我会按照你所说的去做，看看我是否能找到问题所在，李教授没有意识到你已经制作了一个代码沙盒，就像你现在看到的那样-看起来你添加了很多新代码，比我对redux的理解要复杂得多-这就是为什么它现在可以工作的原因，是因为所有额外的代码还是我的原始代码复制时自身工作正常？您确定产品阵列中存在具有传递id的产品吗？您能否在reducer中控制台.log action.payload.id并另外显示您所在州的products数组的外观？将
Col
移动到
cardCreator
中。然后要渲染前4个产品，只需执行
{products.slice（0,4.map（cardCreator）}
。下一节是
{products.slice（4,12）.map（cardCreator）}
，等等。感谢您花时间查看此内容，我想我理解您的思路，但是您的解决方案没有解决此问题。
import { Col, Row } from 'antd';
import React from 'react'
import Cardo from './Card';
import data from '../Data/MenuData';
import { connect } from 'react-redux';
import shopReducer from '../Redux/Shopping/ShoppingReducer';
import ReduxCardo from './ReduxRenderedCard';


const cardCreator = (product) => {
    return(
        <Cardo
            key={product.id}
            image={product.image}
            header={product.header}
            price={product.price}
            description={product.description}

        />
    )
}



function MyMenu({ products }) {
    return (
        <div className="menu">
            <h1 className="menu-header" >Starters</h1>
            <Row className="menu-row" gutter={{xs: 32, sm: 24, md: 16, lg: 8}}>
                {/* <Col span={{xs: 24, sm: 12, md: 8, lg: 6}}>
                    {products.map(cardCreator1)};
                </Col> */}
                <Col span={{xs: 24, sm: 12, md: 8, lg: 6}}>
                    {products.map(cardCreator)[0]}   
                </Col>
                <Col span={{xs: 24, sm: 12, md: 8, lg: 6}}>
                    {products.map(cardCreator)[1]}   
                </Col>
                <Col span={{xs: 24, sm: 12, md: 8, lg: 6}}>
                    {products.map(cardCreator)[2]}   
                </Col>
                <Col span={{xs: 24, sm: 12, md: 8, lg: 6}}>
                    {products.map(cardCreator)[3]}   
                </Col>
            </Row>
            <h1 className="menu-header">Mains</h1>
            <Row className="menu-row" gutter={{xs: 32, sm: 24, md: 16, lg: 8}}>
                <Col span={{xs: 24, sm: 12, md: 8, lg: 6}}>
                    {products.map(cardCreator)[4]}   
                </Col>
                <Col span={{xs: 24, sm: 12, md: 8, lg: 6}}>
                    {products.map(cardCreator)[5]}   
                </Col>
                <Col span={{xs: 24, sm: 12, md: 8, lg: 6}}>
                    {products.map(cardCreator)[6]}   
                </Col>
                <Col span={{xs: 24, sm: 12, md: 8, lg: 6}}>
                    {products.map(cardCreator)[7]}   
                </Col>
                <Col span={{xs: 24, sm: 12, md: 8, lg: 6}}>
                    {products.map(cardCreator)[8]}   
                </Col>
                <Col span={{xs: 24, sm: 12, md: 8, lg: 6}}>
                    {products.map(cardCreator)[9]}   
                </Col>
                <Col span={{xs: 24, sm: 12, md: 8, lg: 6}}>
                    {products.map(cardCreator)[10]}   
                </Col>
                <Col span={{xs: 24, sm: 12, md: 8, lg: 6}}>
                    {products.map(cardCreator)[11]}   
                </Col>
            </Row>
            <h1 className="menu-header">Rice</h1>
            <Row className="menu-row" gutter={{xs: 32, sm: 24, md: 16, lg: 8}}>
                <Col span={{xs: 24, sm: 12, md: 8, lg: 6}}>
                    {products.map(cardCreator)[14]}   
                </Col>
                <Col span={{xs: 24, sm: 12, md: 8, lg: 6}}>
                    {products.map(cardCreator)[15]}   
                </Col>
                <Col span={{xs: 24, sm: 12, md: 8, lg: 6}}>
                    {products.map(cardCreator)[16]}   
                </Col>
                <Col span={{xs: 24, sm: 12, md: 8, lg: 6}}>
                    {products.map(cardCreator)[17]}   
                </Col>
            </Row>
            <h1 className="menu-header">Desserts</h1>
            <Row className="menu-row" gutter={{xs: 24, sm: 12, md: 8, lg: 6}}>
                <Col span={{xs: 24, sm: 12, md: 8, lg: 6}}>
                    {products.map(cardCreator)[12]}
                </Col>
                <Col span={{xs: 24, sm: 12, md: 8, lg: 6}}>
                    {products.map(cardCreator)[13]}
                </Col>
            </Row>
        </div>
    )
}

const mapStateToProps = (state) => {
    return{
        products: state.shop.products,
    };

}

export default connect(mapStateToProps)(MyMenu);

import * as actionTypes from './ShoppingTypes';

export const addToCart = (itemID) => {
    return{
        type: actionTypes.ADD_TO_CART,
        payload: {
            id: itemID
        },
    };
};

export const removeFromCart = (itemID) => {
    return{
        type: actionTypes.REMOVE_FROM_CART,
        payload: {
            id: itemID
        },
    };
};

export const adjutQty = (itemID, value) => {
    return{
        type: actionTypes.ADJUST_QTY,
        payload: {
            id: itemID,
            qty: value,
        },
    };
};

export const loadCurrentItem = (item) => {
    return{
        type: actionTypes.LOAD_CURRENT_ITEM,
        payload: item,
    };
};

state.cart.find((item) => item.id === action.payload.id ? true : false);

            return{
                //we spread the state first so not to lose current or all the products
                ...state,
                //inCart we check if it is in cart and that return true - if so map through cart and find that id
                cart: inCart ? state.cart.map((it) =>
                     it.id === action.payload.id 
                     //Then spread all of data inside and change quantity if needed
                        ? {...item, qty: item.qty + 1} : item
                        ) //if not in cart then spread the array and add the item and quantity to state of cart 
                        : [...state.cart, { ...item, qty: 1}],
            };