Как вставить новое значение в массив объектов в React

Я думаю, что это может быть глупый вопрос, но, поверьте, я новичок в React. Я пытаюсь вставить новый ключ и значение в массив объекта, но не могу этого сделать. Может кто-нибудь, пожалуйста, помогите мне, как достичь моей цели. Спасибо

Код

this.state= {
cartItems=[
{name:'item1',price:'$23'},
{name:'item2',price:'$26'},
{name:'item3',price:'$24'},
]

Я хочу добавить новое значение, например quantity:0, в конец массива объектов. Помогите пожалуйста мне


reactjs javascript react-redux ecmascript-6 ecmascript-2016
person Jonas    schedule 27.04.2020    source источник
comment
Это состояние не обновляется в DOM или в объекте?   -  person Karan Kiri    schedule 27.04.2020
comment
Что вы сделали до сих пор, чтобы заставить эту работу работать? Где ты застрял?   -  person fjc    schedule 27.04.2020
comment
Я буквально погуглил заголовок вашего потока: stackoverflow.com/questions/37435334/   -  person emrhzc    schedule 27.04.2020
comment
Вы хотите добавить quantity: 0 для каждого объекта или как отдельный объект в конце массива?   -  person leonardfactory    schedule 27.04.2020
comment
Отвечает ли это на ваш вопрос? Правильный способ вставки в массив состояний   -  person emrhzc    schedule 27.04.2020
comment
@leonardfactory Да, я хочу добавить quantity:0 в конец каждого объекта   -  person Jonas    schedule 27.04.2020
comment
@emrhzc Нет, на самом деле мой вопрос в другом   -  person Jonas    schedule 27.04.2020
comment
@leonardfactory, не могли бы вы помочь мне с этим вопросом?   -  person Jonas    schedule 27.04.2020

Ответы (3)


arrow_upward
1
arrow_downward

Если вы хотите обновить состояние, добавив свойство к каждому объекту, вы должны просто использовать setState в сочетании с map. Array.prototype.map позволяет вам преобразовывать каждый объект, например:

this.setState(state => {
  cartItems: state.cartItems.map(cartItem => ({ 
    ...cartItem, // Keep all old properties
    quantity: 0 // Add quantity
  })
})

Это следует делать, только если вы вызываете setState после инициализатора. Если вам нужно изменить данные прямо при назначении this.state, просто сопоставьте массив напрямую.

person leonardfactory    schedule 27.04.2020

arrow_upward
0
arrow_downward

Может быть, попробовать это

const newState = this.state.cartItems.map(item => {
  item.quantity = 0;

  return item;
});

this.setState({cartItems: newState});
person Aaron    schedule 27.04.2020

arrow_upward

arrow_downward

person    schedule
comment
вы вызвали функцию updateCartItems? например: componentDidMount() {this.updateCartItems()} - person Sachin Kammar; 27.04.2020
comment
Да, я вызвал этот метод в componentdidmount - person Jonas; 27.04.2020
comment
Просто чтобы подчеркнуть это, вы использовали filter вместо карты и написали quality вместо quantity - person leonardfactory; 27.04.2020