如何在reactjs中将项目正确添加到状态（空数组）？

Question

im trying to add items to the empty array selectedProducts, but every item i add becomes nested inside the other, my goal is to have one array with all the items selected spread inside. im new to react so examples would be greatly appreciated :)

my state:

state = {
    products: products,
    selectedProducts: [],
    totalPrice: 0
  };

the method:

handleQuantityChange = item => {
    const {selectedProducts} = this.state
    const carsSelected = Object.assign([{...selectedProducts}],item)
    this.setState(
      {selectedProducts:carsSelected}
    );

the result (every 0 represent a nested array that shows one item(car)):

[{…}, id: 2, name: "Bugatti", price: 3200000, description: "Extremely Fast", total: 0, …]
0:
0:
0:
__proto__: Object
count: 0
description: "High Performance"
id: 4
img: 
name: "BMW"
price: 120000
total: 0
__proto__: Object
count: 0
description: "Kinda Fast"
id: 3
img: 
name: "Maserati"
price: 800000
total: 0
__proto__: Object
count: 0
description: "Extremely Fast"
id: 2
img: 
name: "Bugatti"
price: 3200000
total: 0
length: 1

Answer 1

You can simply do this,

this.setState({
   selectedProducts: [...this.state.selectedProducts , item]
});

Answer 2

handleQuantityChange = item => {
    const {selectedProducts} = this.state
    const carsSelected = [...selectedProducts,item]
    this.setState(
      {selectedProducts:carsSelected}
    );

Answer 3

you don't need to use object.assign and spread operator together.

for array you can use like this

this.setState({
   selectedProducts: [...this.state.selectedProducts , item]
});

for object you can use like this

this.setState({
   selectedProducts: {...this.state.selectedProducts , item: '123'}
});