Question

我正在做这个小项目而且我被困住了，但我希望不是那么多！我已经粘贴了所有代码，因此您可以看到整个图片。

我想做的是让onClick事件只更改购物车中的实际商品。截至目前，当您按+或 - 时，所有项目都会受到影响。我尝试了很多不同的东西，但我是新手，所以我不确定下一步该尝试什么。

/* jshint esversion: 6 */

import React from 'react';
import Cart_api from 'shared/module/cart_api';
import Cart from 'shared/module/cart';
import {OrderItem} from 'shared/module/cart';

export default class Minicart extends React.Component {
    constructor() {
        super();
        this.state = {
            items: []
        };


    }

    componentWillMount() {
        var self = this;
        Cart_api.orderItems({success: function(data) {
            console.log('hhh', data)
            data.orderItem.forEach(function(orderItem) {
                self.add(orderItem);
            });
        }});  
    }

    add(orderItem) {
        this.setState(prevState => ({
           items: [
               ...prevState.items,
               {
                   id: orderItem.productId,
                   quantity: parseInt(orderItem.quantity)
               }
           ]

        }));

    }

    remove(id){
        console.log('remove', id);
      this.setState(prevState => ({
         items: prevState.items.filter(item => item.id !== id)            
      }));
    }

    IncrementItem(id) {
        this.setState(prevState => ({
            items: prevState.items.filter(item =>  {
                item.quantity = item.quantity + 1;
                    return true;    
                })
            }));
            }         

    DecreaseItem(id) {
        this.setState(prevState => ({
            items: prevState.items.filter(item => {
                item.quantity = item.quantity - 1;
                return true;
            })
        }));
        }

    render(data) {
        return (
            <div style={{textAlign: 'center'}}>
                <h1>Hello World, im React! :D</h1>
                <ul>
                    {
                        this.state.items.map((item) => {
                            return (
                                <li key="{item.id}">item: {item.id} ({item.quantity}) 
                                <button onClick={() => this.remove(item.id)}>remove /</button>
                                <button onClick={() => this.IncrementItem(item.id)}>item +</button> / 
                                <button onClick={() => this.DecreaseItem(item.id)}>item -</button>
                               </li>
                           )
                        }) 
                    }                                       
                </ul>
            </div>
        );
    }
}

Answer 1

由于您的代码是针对ES6的，所以您可以这样做：

IncrementItem(id) {    
    this.setState(prevState => ({
        const items = prevState.items
        const item = items.find(id)
        item.quantity = item.quantity + 1
        return {items}
    }))
}

编辑：用prevState重写。

Answer 2

这里的项目值将是您要增加的当前项目。索引将是您从map函数分配的索引值。

incrementCount(item,index){ // index will be the key value 
    const items = this.state.itemsList;           
    item.quantity += 1;
    items.splice(index,1,item);
    this.setState({
      itemsList: items
    });
   }


render() {
    const { itemsList } = this.state;

    return (
      <div>
        <h1>CartItems</h1>
        <table border="1">
          <tbody>
            {itemsList.map((item, index) => {
              return (
                <tr key={index}>
                  <td>{item.label}</td>
                  <td>{Math.round(item.price)}</td>
                  <td>
                    <button onClick={() => this.decrementCount(item,index)}>
                      {' '}
                      -{' '}
                    </button>
                  </td>
                  <td>{item.quantity}</td>
                  <td>
                    <button onClick={() => this.incrementCount(item,index)}>
                      {' '}
                      +{' '}
                    </button>
                  </td>
                </tr>
              );
            })}
            <tr>
              <td></td>
              <td>{this.calculateTotal(itemsList)}</td>
            </tr>
          </tbody>
        </table>
      </div>
    );
}

购物车中React，Increment / Decrement的新功能

2 个答案: