मैं चाहता हूं कि उत्पादों को टोकरी में जोड़ते समय इसकी नकल न हो। लेकिन यह लिखा होगा कि टोकरी में पहले से ही इनमें से 2 या अधिक सामान हैं। मैं इसे कोड में कैसे कार्यान्वित करूं? मैं समझता/समझती हूं कि मुझे अतिरिक्त उत्पादों के लिए एक काउंटर की आवश्यकता है, लेकिन यह नहीं पता कि यह कैसे करना है। कृपया मुझे एक टिप दें मुझे किसी भी मदद से खुशी होगी।

import React from "react";
import ReactDOM from "react-dom";

class Shop extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [
        {
          id: 1,
          name: "Product 1",
          price: "50",
          q:0
        },
        {
          id: 2,
          name: "Product 2",
          price: "70",
          q:0
        },
        {
          id: 3,
          name: "Product 3",
          price: "80",
          q:0
        },
        {
          id: 4,
          name: "Product 4",
          price: "90",
          q:0
        },
        {
          id: 5,
          name: "Product 5",
          price: "100",
          q:0
        }
      ],
      count: []
    };
  }
  incrementCount = (item) => {
    const {id, name, price, q} = item;
    let array = [...this.state.count];
    let indexOfStevie = array.findIndex(i => i.id === id);
    array[indexOfStevie] = {...item, q: q+1}
    console.log(array[indexOfStevie])
    if (!array.some(i => i.id === id)) {
      this.setState({
        count: [...this.state.count, { id, name, price, q: q+1}]
      });

    }
  };


  delete = id => {
    let array = [...this.state.count].filter(item => item.id !== id);
    this.setState({
      count: [...array]
    });
  };

  render() {
    return (
      <div className="wrap">
        <div>
          <h3>products</h3>
          <ul>
            {this.state.data.map(item => (
              <li key={item.id}>
                {item.name}
                {item.price}
                <button
                  onClick={() =>
                    this.incrementCount(item)
                  }
                >
                  add
                </button>
              </li>
            ))}
          </ul>
        </div>
        <div>
          <h3>bascket</h3>
          <ul>
            {this.state.count.map(item => (
              <li>
                {item.id}
                {item.name}
                <button onClick={() => this.delete(item.id)}>X</button>
              </li>
            ))}
          </ul>
          <div>
            {this.state.count.length == 0
              ? "empty"
              : "total" +
                this.state.count.reduce(
                  (accumulator, currentValue) =>
                    accumulator + +currentValue.price,
                  0
                )}
          </div>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<Shop />, document.getElementById("todos-example"));
-2
incognita 21 नवम्बर 2019, 01:51

2 जवाब

constrsuctor(props){
   this.state = { my_cart : {} }
}

add_to_cart = (item) => {
  let cart_instance = this.state.my_cart[item.id];
  this.setState({
     my_cart : { ...this.state.my_cart,  [item.id] : (cart_instance) ? this.state[item.id] + 1 : 0 }
  });
}

यह आपको आपकी गाड़ी का प्रतिनिधित्व {1: n, 2: n, ....} के रूप में छोड़ देगा जहां n कितने हैं

-1
Albin wärme 21 नवम्बर 2019, 02:09

आप उत्पाद ऑब्जेक्ट को केवल एक बार जोड़ रहे हैं यदि उसकी आईडी गिनती में नहीं मिलती है। यही कारण है कि q नहीं बदल रहा है; यह हमेशा 1 होता है क्योंकि जब इसे जोड़ा जाता है तो q यही होता है। यदि यह गिनती में है पाया जाता है, तो आपको इसे बढ़ाना होगा। जितना संभव हो सके अपने अन्य कोड को बरकरार रखना:

  incrementCount = (item) => {
    const {id, name, price, q} = item;
    let array = [...this.state.count];
    let indexOfStevie = array.findIndex(i => i.id === id);

    // if the product is currently in the count, modify it
    if(indexOfStevie > -1) {
      array[indexOfStevie].q++
      this.setState( {
        count: array
      } );
    } else {

      // the product is not currently in count, add it
      this.setState({
        count: [...this.state.count, { id, name, price, q: q+1}]
      });
    }
  };

फिर कुल उत्पन्न करने के लिए, आपको केवल मूल्य जोड़ने के बजाय मात्रा * मूल्य का उत्पाद जोड़ना होगा। रेंडर () में:

    {this.state.count.length == 0
      ? "empty"
      : "total" +
        this.state.count.reduce(
          (accumulator, currentValue) =>
            // add the product of quantity and price to total
            accumulator + (currentValue.q * currentValue.price),
          0
     )} 

उदाहरण

-1
emsoff 21 नवम्बर 2019, 06:25