在 React 中将新商品添加到我的购物车答案

【问题标题】：Add new items to my shopping cart in React在 React 中将新商品添加到我的购物车
【发布时间】：2020-02-09 16:22:18
【问题描述】：

我创建了一个简单的在线订餐系统。我面临的问题是，当我点击添加按钮时，相应的商品会添加到购物车中。但是，当我单击另一个项目的添加按钮时，购物车中的现有项目会更新，而不是附加为下一个项目。

下面是代码的重要部分。

Orders.jsx

import React from 'react'
import Menu from '../components/Menu'
import data from '../data/data.json'
import MyCart from '../components/MyCart'

class Orders extends React.Component {
constructor(){
    super();
    this.state = {
        list: data,
        id:'',
        newList:[],
        price:'',
        name:'',
        total:0,
        quantity:0,
        clickable: false
    };
}
childHandler = (ChildPrice,ChildName,ChildQuantity) => {

    this.setState(
        {price: ChildPrice,
        name: ChildName,
        quantity : ChildQuantity+1,
        clickable: true }
    )};
render(){
    return(
    <div>
         <div id='items'>
                    <center><h2>Order Now</h2></center>
                    <br/>

                    {this.state.newList.map (
                        x => x.menu.map(item => <Menu
                                                    desc={item.desc} 
                                                    price={item.price} 
                                                    name={item.name}
                                                    action={this.childHandler} />)
                    )       

                    }

                </div>
        <div id= "right-in">
                        <h4>My Cart</h4>

                        { this.state.clickable && 
                            <div>
                                <MyCart 
                                    name={this.state.name}
                                    price={this.state.price}
                                    quantity={this.state.quantity} 
                                    increment={this.incrementQuantity} 
                                    decrement={this.decrementQuantity}>
                                </MyCart>
                            </div>
                        }

                        <div id="total">
                            <p id="total"> Total amount: 
                                <span className="spn">{'\u20B9'}  {this.state.total}</span>
                            </p>
                            <input id="pay" type="button" value="Calculate"
                            onClick = {() => this.total(this.state.price,this.state.quantity)} />
                            <br/>
                            <input id="pay" type="button" value="Pay Now"/>
                        </div>
                    </div> 
</div>

Menu.js

import React from 'react'
class Menu extends React.Component{

constructor(){
    super();
    this.state = {
        price: '',
        quantity:0
    }
}

render(){
    return(
        <div>
            <h3 className='fname'>{this.props.name}</h3>
                <div className='desc'>
                    <p>{this.props.desc}</p>
                    <button className="btn" value={this.props.price} onClick={()=>this.props.action(this.props.price,this.props.name,this.state.quantity)}>Add</button>
                </div>
                <br/>   
                <p className='amount'>{'\u20B9'}  {this.props.price} </p>

        </div>

    )
}
}

export default Menu;

MyCart.js

import React from 'react'
class MyCart extends React.Component{
render(){
    return(
        <div>
            <p id="pitem"> {this.props.name} <br/><br/>
                    <input className="ip" type="button" value="-" onClick={()=>this.props.decrement(this.props.quantity)}/>
                    <input className="ip" id="tx-w" type="text" value={this.props.quantity}/>
                    <input className="ip" type="button" value="+" onClick={()=>this.props.increment(this.props.quantity)}/>
            </p>  
        </div>
    )
}
}

export default MyCart

这是订单页面的截图

欢迎提出任何建议！提前致谢！

【问题讨论】：

状态只是临时选项，不能添加到状态，只能更新。在我看来，您应该使用数据库来临时保存这些项目。或使用会话。
负责向cart添加项目的代码在哪里？
@AhmadAli 我们可以在状态中创建一个空列表，单击按钮后将新项目附加到该列表并在购物车部分显示列表的全部内容吗？
@goto1 我已经用 MyCart.js 代码更新了我的问题
您的MyCart.js 只是一些JSX 代码。存储您添加到Cart 的项目的代码在哪里？ this.setState({ cart: [existingItems, newItem] }) 的行很长

标签： javascript reactjs

【解决方案1】：

将状态名称属性类型更改为数组而不是字符串：

this.state = {
        list: data,
        id:'',
        newList:[],
        price:'',
        name:[],    //name should be an array not a string
        total:0,
        quantity:0,
        clickable: false
    };

childHandler = (ChildPrice,ChildName,ChildQuantity) => {
    const names = this.state.name; 
    names.push(childName);
    this.setState(
        {price: ChildPrice,
        name: names,
        quantity : ChildQuantity+1,
        clickable: true }
    )};

在您的购物车页面中，props.name 应该是一个数组而不是字符串。

    import React from 'react'
    class MyCart extends React.Component{
    render(){
        return(
            <div>
               {this.props.name.map((name,number) => (
                    <p key={number} id="pitem"> 
                        {name} <br/><br/>
                     </p>
                    )}
               <p>
                        <input className="ip" type="button" value="-" onClick={()=>this.props.decrement(this.props.quantity)}/>
                        <input className="ip" id="tx-w" type="text" value={this.props.quantity}/>
                        <input className="ip" type="button" value="+" onClick={()=>this.props.increment(this.props.quantity)}/>
                </p> 
            </div>
        )
    }
    }

    export default MyCart

【讨论】：