React如何将新的动态密钥添加到现有状态？

Question

I have getting the data from database as an array. So now I'm getting array like this:

orders:[
{
_id:1,
name: honda,
}
{
_id:2,
name: suzuki,
}
{
_id:3,
name: audi,
}
]

So my question is how can I attach new key value to the array, so It needs to look like this:

orders:[
{
_id:1,
name: honda,
opened:true,
}
{
_id:2,
name: suzuki,
opened:true,
}
{
_id:3,
name: audi,
opened:true,
}
]

For now I'm trying with this code, but this doesn't work:

getOrders(orders).then(response => {
        response.map(itm=>{
            const ordersData=[...itm]
            const opened={opened:true}
            this.setState({
                openedOrders: [ordersData,opened]
            })
        })
}) 

openedOrders is new state object that I create. What is best solution for this? Thanks

Answer 1

Your map should look like this. (Note the return statement in map function)

orders.map(item=> {
  return {...item, opened:true}  

})

So your function could look like

getOrders(orders).then(response => {
   let openedOrders =  orders.map(item=> {
       return {...item, opened:true}  
     })
   this.setState({
     openedOrders
   })

}) 

Answer 2

To add dynamic keys to a object in javascript we use [].

var x = [{ _id : 1, name: Suzuki}];

x[0]['opened'] =  true;

console.log(x);

// [{ _id : 1, name: Suzuki, opened: true}];

Answer 3

Use foreach() to loop through all the orders in the array and add the desired property for each order.

 let orders = [{ _id: 1, name: 'honda', }, { _id: 2, name: 'suzuki', }, { _id: 3, name: 'audi', }] orders.forEach(o => o.opened = true) console.log(orders) 

Answer 4

You could add a new property to the objects.

 var orders = [{ _id: 1, name: 'honda' }, { _id: 2, name: 'suzuki' }, { _id: 3, name: 'audi' }], additionalProp = { opened: true }; orders.forEach(o => Object.assign(o, additionalProp)); console.log(orders); 

 .as-console-wrapper { max-height: 100% !important; top: 0; } 

Or map a new array without mutating the original objects.

 var orders = [{ _id: 1, name: 'honda' }, { _id: 2, name: 'suzuki' }, { _id: 3, name: 'audi' }], additionalProp = { opened: true }, result = orders.map(o => Object.assign({}, o, additionalProp)); console.log(result); 

 .as-console-wrapper { max-height: 100% !important; top: 0; } 

Answer 5

Assuming response contains the first array in your OP:

getOrders(orders).then(response => {
  const openedOrders = response.map(order => ({ ...order, open: true}))
  this.setState({ openedOrders } )
})

response.map(order => ({ ...order, open: true}) adds a key open with the value true to every order in the array.