将多个对象添加到数组？

Question

Every time I click an option of size and click add to cart I would like to add the data of the selected object to this array cart . This currently works kinda but only one object can be added and when you try to do it again the old data disappears and is replaced with the new object.

I would like to keep odd objects in the array and add new objects too. How do I go about doing this?

index.js

export class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      evenSelected: null
    };
  }

  handleSelectL1 = i => {
    this.setState({
      evenSelected: i,
      oldSelected: null
    });
  };

  render() {
    const product = [
      {
        name: " size one",
        price: 1
      },
      {
        name: "size two",
        price: 2
      },
      ,
      {
        name: "size three",
        price: 3
      }
    ];

    const cart = [];

    const addCart = function() {
      cart.push(product[evenIndex]);
      if (cart.length > 0) {
      }
    };
    console.log("cart", cart);

    const evenIndex = this.state.evenSelected;
    const priceShown = product[evenIndex] && product[evenIndex].price;
    return (
      <div>
        <Child
          product={product}
          handleSelectL1={this.handleSelectL1}
          evenIndex={evenIndex}
        />
        <h2>Price:{priceShown} </h2>
        <button onClick={addCart}>Add to cart</button>
      </div>
    );
  }
}

child.js

export class Child extends Component {
  constructor(props) {
    super(props);

    this.state = {};
  }

  render() {
    const { product, evenIndex } = this.props;

    return (
      <div>
        {product.map((p, i) => {
          return (
            <div
              key={p.id}
              className={evenIndex === i ? "selectedRBox" : "selectorRBox"}
              onClick={() => this.props.handleSelectL1(i)}
            >
              <h1 className="selectorTextL">{p.name}</h1>
            </div>
          );
        })}
      </div>
    );
  }
}

Here is my code on sandbox: https://codesandbox.io/s/14vyy31nlj

Answer 1

I've just modified your code to make it work. Here is the complete code . You need cart to be part of the state, so it does not initialize in each render, and to make the component render again when you add an element.

Remove the function to make it a method of the class:

  addToCart() {
    const selectedProduct = products[this.state.evenSelected];
    this.setState({
      cart: [...this.state.cart, selectedProduct]
    });
  }

And call it on render:

  render() {
    console.log("cart", this.state.cart);
    const evenIndex = this.state.evenSelected;
    const priceShown = products[evenIndex] && products[evenIndex].price;
    return (
      <div>
        <Child
          product={products}
          handleSelectL1={this.handleSelectL1}
          evenIndex={evenIndex}
        />
        <h2>Price:{priceShown} </h2>
        <button onClick={this.addToCart.bind(this)}>Add to cart</button>
      </div>
    );
  }
}

Check that I have binded on render, which can bring performance issues in some cases. You should check this

Update

As devserkan made me notice (Thanks!), when you use the previous state to define the new state (for example adding an element to an array), it is better to use the updater function instead of passing the new object to merge:

this.setState(prevState => ({
  cart: [...prevState.cart, products[selectedProduct]],
}));

For more info check the official docs .

Answer 2

I don't quite understand what are you trying to but with a little change here it is. I've moved product out of the components like a static variable. Also, I've changed the addCart method, set the state there without mutating the original one and keeping the old objects.

 const product = [ { name: " size one", price: 1 }, { name: "size two", price: 2 }, { name: "size three", price: 3 } ]; class App extends React.Component { constructor(props) { super(props); this.state = { evenSelected: null, cart: [], }; } handleSelectL1 = i => { this.setState({ evenSelected: i, oldSelected: null }); }; addCart = () => { const evenIndex = this.state.evenSelected; this.setState( prevState => ({ cart: [ ...prevState.cart, product[evenIndex] ], })) }; render() { console.log(this.state.cart); const evenIndex = this.state.evenSelected; const priceShown = product[evenIndex] && product[evenIndex].price; return ( <div> <Child product={product} handleSelectL1={this.handleSelectL1} evenIndex={evenIndex} /> <h2>Price:{priceShown} </h2> <button onClick={this.addCart}>Add to cart</button> </div> ); } } class Child extends React.Component { constructor(props) { super(props); this.state = {}; } render() { const { product, evenIndex } = this.props; return ( <div> {product.map((p, i) => { return ( <div key={p.id} className={evenIndex === i ? "selectedRBox" : "selectorRBox"} onClick={() => this.props.handleSelectL1(i)} > <h1 className="selectorTextL">{p.name}</h1> </div> ); })} </div> ); } } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement); 

 .selectorRBox { width: 260px; height: 29.5px; border: 1px solid #727272; margin-top: 18px; } .selectedRBox { width: 254px; height: 29.5px; margin-top: 14px; border: 4px solid pink; } .selectorTextL { font-family: "Shree Devanagari 714"; color: #727272; cursor: pointer; font-size: 18px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div>