Как обновить объект по определенному индексу в массиве в состоянии React? - PullRequest
Новая
       32

Как обновить объект по определенному индексу в массиве в состоянии React?

0 голосов
/ 28 апреля 2018

Я создаю приложение для подсчета калорий с помощью React. Один из моих компонентов имеет в своем списке продуктов питания: 

this.state = {
   items: [
      {
        name: 'Chicken',
        selectedServing: {
           label: 'breast, grilled',
           quantity: 3
        }
      },
      {
        name: 'French Fries',
        selectedServing: {
           label: 'medium container',
           quantity: 1
        }
      }
   ]

Когда пользователь меняет размер порции, который он потребляет, мне приходится обновлять свойства элемента в массиве items[]. Например, если пользователь съел другую куриную грудку, мне нужно изменить объект selectedServing в items[0].

Поскольку этот массив является частью состояния компонента, я использую immutability-helper. Я обнаружил, что могу правильно клонировать и изменять состояние следующим образом: 

let newState = update(this.state, {
  items: {
    0: {
      selectedServing: {
        servingSize: {$set: newServingSize}
      }
    }
  }
});

Приведенный выше код устанавливает serveSize для первого элемента в массиве items[], который является Chicken. Однако , я не буду заранее знать индекс объекта, который мне нужно обновить, поэтому жестко запрограммированный 0 не будет работать. Кажется, я не могу сохранить этот индекс в переменной, потому что update() будет думать, что это ключ объекта.

Как программно обновить объект по определенному индексу в списке?

1 Ответ

0 голосов
/ 28 апреля 2018

В качестве ключа объекта может использоваться переменная. 

let foo = 3
let newState = { items: { [foo]: { somthing: 'newValue' } } }
// above is equal to { items: { '3': { somthing: 'newValue' } } }

Вы можете найти порядковый номер Chicken и сохранить его в переменной, а также использовать его для составления newState.

...