增加一个单品的一项，改变ReactJS中所有产品的数量

Question

尝试添加两个按钮，一个用于添加项目（增加数量计数），另一个用于删除项目（减少数量计数）以更新数量参数。当我单击一个产品的添加项目按钮时，所有产品的数量都在更新。如何让这些按钮为每个产品独立工作？ 下面是我写的代码：

 import React from 'react';
import ReactDOM from 'react-dom';
import Paper from 'material-ui/Paper';
import products from './Products';
import {
    Table,
    TableBody,
    TableHeader,
    TableHeaderColumn,
    TableRow,
    TableRowColumn, } from 'material-ui/Table';



const style = {
    height: 600,
    width: 900,
    margin: 20,
    textAlign: 'center',
    display: 'inline-block',
  };


export default class Cart extends React.Component{
    constructor(props){
        super(props);
        this.state={ count:1 }
    }


addOne(id) {                              // addOne one item when button clicked
    this.setState(prevState => {
      return {count : prevState.count + 1 }
     });
   }

   removeOne(id) {                              // removeOne one item when button clicked
    this.setState(prevState => {
        if(prevState.count>=1) {
      return { count : prevState.count - 1 }
        }
        else{
            alert('quantity cant be less than zero')
        }
     });
   }

render(){
    return(
        <div> 
            <Paper style={style} zDepth={1} > 
                <div> 
                    <div>
                        <h3> here are the products ! </h3>
                    </div> <hr/>
                    <div>
                                {Products.map(productlist =>(
                                    <Table >
                                        <TableHeader displaySelectAll={false} adjustForCheckbox={false} >
                                            <TableRow>
                                                <TableHeaderColumn></TableHeaderColumn>
                                                <TableHeaderColumn></TableHeaderColumn>
                                                <TableHeaderColumn></TableHeaderColumn>
                                                <TableHeaderColumn></TableHeaderColumn>
                                            </TableRow>
                                        </TableHeader>
                                        <TableBody displayRowCheckbox={false} >
                                            <TableRow key={productlist.id}>
                                                <TableRowColumn>{productlist.name}</TableRowColumn>
                                                <TableRowColumn>{productlist.description}</TableRowColumn>
                                                <TableRowColumn>{productlist.description}</TableRowColumn>
                                                <TableRowColumn>Price per each item:<br/> {productlist.price}</TableRowColumn>
                                                <TableRowColumn>
                                                <input  type='button' onClick={this.addOne.bind(this,productlist.id)} value='add an item'/>
                                                <input  type='button' onClick={this.removeOne.bind(this,productlist.id)} value='remove an item'/>
                                                    <br/> <span> quantity:  {this.state.count}  </span> 
                                                </TableRowColumn>
                                            </TableRow>
                                        </TableBody>
                                    </Table>
                                ))}

                            </div>
                            <div> 
                                <p> Total price: </p>
                    </div>

                 </div>
            </Paper>
        </div>
    );
}
}

下面是示例 Product.js 代码：

    let Products=[
    {
        id:1, name:"Fastrack Women's Watch", 
        description:"Analog Pink Dial Women's Watch - 6150SM04",
        price:2500
    },
    {
        id:2, name:"Fastrack Women's Watch", 
        description:"Analog Pink Dial Women's Watch - 6150SM04",
        price:2100
    },
    {
        id:3, name:"Fastrack Women's Watch", 
        description:"Analog Pink Dial Women's Watch - 6150SM04",
        price:1800
    },

];

export default Products;

Answer 1

我建议您重新考虑一下您的程序设计。在我看来，您应该将单个产品移动到它自己的组件中，然后它也会有一个状态。因此，从购物车中删除状态并创建一个组件并将其命名为 Product。此 Product 组件将是 Cart 的子组件。如果您需要从 Product 更新购物车中的某些内容，则可以使用回调。

类似

class Cart extends React.Component {
    render(){
        <..>
            {products.map(product => {
                 // New shiny component with state
                 return <Product {...props} />
             })}
        <..>
    }
}

希望这会有所帮助！