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

Question

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

下面是代码的重要部分。

订单.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>

菜单.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;

我的购物车.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

这是订单页面的截图

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

Answer 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