Блог

Главная - Вопросы по программированию - React Как добавить новый динамический ключ в существующее состояние?

React Как добавить новый динамический ключ в существующее состояние?

#javascript #reactjs

#javascript #reactjs

Вопрос:

Я получаю данные из базы данных в виде массива. Итак, теперь я получаю массив, подобный этому:

 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 — это новый объект состояния, который я создаю.
Какое лучшее решение для этого?
Спасибо

Ответ №1:

Ваша карта должна выглядеть следующим образом. (Обратите внимание на оператор return в функции map)

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

})

Итак, ваша функция может выглядеть следующим образом

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

})

Комментарии:

1. Да, но я должен добавить его в состояние с помощью setState. Итак, в этом состоянии открыто новое имя Orders

2. Отредактировал ответ, чтобы использовать openedOrders в качестве нового имени

3. это было лучшее решение… спасибо!

Ответ №2:

Предполагая, что 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 в массиве.

Ответ №3:

Для добавления динамических ключей к объекту в javascript мы используем [] .

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

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

console.log(x);

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

Ответ №4:

Используйте foreach() для перебора всех порядков в массиве и добавления нужного свойства для каждого порядка.

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

Ответ №5:

Вы могли бы добавить новое свойство к объектам.

 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);  
 .as-console-wrapper { max-height: 100% !important; top: 0; }