从状态数组中删除项目，然后将此项目添加到另一个状态数组中

Question

I'm want Delete items from state array and add this items another state array

deleteItem = (id) => {
this.setState(prevState => {
  const index = this.state.productData.findIndex(item => item.id === id); this.state.storeData[0].saveProducts.push(this.state.productData.slice(index, 1))
  return this.state.productData
 })
 }

Json StoreData , Saveproducts item of object in array

[ 
  { 
  "code": "f1", 
  "name": "storage-no-1", 
  "capacity": 125, 
  "temperture": -18,
  "humidity": 3 ,
  "saveProdoucts":[]
  }, 
 { 
  "code": "f2",
 "name": "storage-no-2",
 "capacity": 15, 
 "temperture": -18,
 "humidity": 25,
 "saveProdoucts":[]
  },
  {
   "code": "R3",
   "name": "storage-no-3", 
    "capacity": 40, 
    "temperture": 21,
    "humidity": 30,
     "saveProdoucts":[]
  } 
 ]

Answer 1

please check the below sample code, on click of each item it will remove the item from the productData and add the corresponding item in the saveProducts property of the storedData.

I hope this will solve the issue. Please save the code in react local development and try to run it.

 import React, { Component, Fragment } from 'react'; class App extends Component { state = { productData: [ { id: 1, productName: "test 1" }, { id: 2, productName: "test 2" }, { id: 3, productName: "test 3" }, { id: 4, productName: "test 4" } ], storedData: [{ saveProducts: [] }] } addItem = (id) => { const { productData } = this.state this.setState(prevState => ({ productData: productData.filter(product => product.id !== id), storedData: [ { saveProducts: [ ...prevState.storedData[0].saveProducts, ...productData.filter(product => product.id === id) ] } ] }) ) } render() { // Destructuring const { productData, storedData } = this.state return ( <Fragment> <ul> {productData.map(product => { return ( <li onClick={() => this.addItem(product.id)} key={product.id}> <p>{product.productName}</p> </li> ) })} </ul> <h2> Saved Products </h2> { storedData[0].saveProducts.length > 0 ? storedData[0].saveProducts.map(product => { return ( <p key={product.id}> {product.productName} </p> ) }) : "No Products Selected" } </Fragment> ); } } export default App;