Javascript 在React中将新项目添加到我的购物车

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

下面是代码的重要部分

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>

从“React”导入React
从“../components/Menu”导入菜单
从“../data/data.json”导入数据
从“../components/MyCart”导入MyCart
类命令扩展了React.Component{
构造函数（）{
超级（）；
此.state={
列表：数据，
id:“”，
新列表：[]，
价格：''，
名称：“”，
总数：0，
数量：0，
可点击：false
};
}
childHandler=（ChildPrice、ChildName、ChildQuantity）=>{
这是我的国家(
{price:ChildPrice，
姓名：ChildName，
数量：子数量+1，
可单击：true}
)};
render（）{
返回(
现在点菜


{this.state.newList.map(
x=>x.menu.map（项=>）
)       
}
我的手推车
{this.state.clickable&&
}
总金额：
{'\u20B9'}{this.state.total}

this.total（this.state.price，this.state.quantity）}/>

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;

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

从“React”导入React
类菜单扩展了React.Component{
构造函数（）{
超级（）；
此.state={
价格：''，
数量：0
}
}
render（）{
返回(
{this.props.name}
{this.props.desc}

this.props.action（this.props.price、this.props.name、this.state.quantity）}>Add


{'\u20B9'}{this.props.price}
)
}
}
导出默认菜单；

MyCart.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;

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

从“React”导入React
类MyCart扩展了React.Component{
render（）{
返回(
{this.props.name}


this.props.decreation（this.props.quantity）}/>
this.props.increment（this.props.quantity）}/>

)
}
}
导出默认MyCart

这是订单页面的屏幕截图

---

欢迎任何建议！提前感谢！

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

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

从“React”导入React
类MyCart扩展了React.Component{
render（）{
返回(
{this.props.name.map（（名称，编号）=>(

{name}



)}

this.props.decreation（this.props.quantity）}/>
this.props.increment（this.props.quantity）}/>

)
}
}
导出默认MyCart

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

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

从“React”导入React
类MyCart扩展了React.Component{
render（）{
返回(
{this.props.name.map（（名称，编号）=>(

{name}



)}

this.props.decreation（this.props.quantity）}/>
this.props.increment（this.props.quantity）}/>

)
}
}
导出默认MyCart

状态只是一个临时选项，您不能添加到状态，只能更新它。在我看来，您应该使用数据库临时保存这些项目。或者使用会话。负责将项目添加到

购物车的代码在哪里？@AhmadAli我们可以在状态中创建一个空列表，在列表中添加新项目，但单击ton并在cart部分显示列表的全部内容？@goto1我已用MyCart.js代码更新了我的问题your
MyCart.js
只是一些
JSX
code。存储添加到
cart
的项目的代码在哪里？有一行长的
this.setState（{cart:[existingItems，newItem]}）
状态只是一个临时选项，您不能添加到状态，只能更新它。在我看来，您应该使用数据库临时保存这些项目。或者使用会话。负责将项目添加到
购物车的代码在哪里？@AhmadAli我们可以在状态中创建一个空列表，在列表中添加新项目，但单击“吨”并在购物车部分显示列表的全部内容？@goto1我已使用MyCart.js code更新了我的问题您的
MyCart.js
只是一些
JSX
代码。存储您添加到
cart
中的项目的代码段在哪里？
this.setState（{cart:[existingItems，newItem]}）