Question

我已经从数据库获取数据作为数组。所以现在我得到这样的数组：

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

所以我的问题是如何将新键值附加到数组，所以它需要看起来像这样：

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

现在我正在尝试使用此代码，但这不起作用：

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

openedOrders是我创建的新状态对象。最好的解决方案是什么？谢谢

Answer 1

您的地图应如下所示。（请注意map函数中的return语句）

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

})

所以您的函数看起来像

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

})

Answer 2

要在javascript中向对象添加动态键，请使用[]。

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

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

console.log(x);

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

Answer 3

使用foreach()遍历数组中的所有订单，并为每个订单添加所需的属性。

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

您可以向对象添加新属性。

this.player.controlBar.progressControl.seekBar.disable()
this.player.controlBar.progressControl.seekBar.handleClick = () => {}

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; }

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);

Answer 5

假设response包含OP中的第一个数组：

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

response.map(order => ({ ...order, open: true})向数组中的每个open添加具有值true的键order。

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

5 个答案: