Обновление массива состояний ReactJS

Question

У меня есть компонент ReactJS, который отображает список заказов. Я получаю заказы от REST API. Формат данных таков:

{ 
    "count": 2, 
    "orders": [ 
     { 
      "order_number": 55981, 
      "customer_number": 24742 
     }, 
     { 
      "order_number": 55980, 
      "customer_number": 24055 
     } 
    ] 
} 

В каждом заказе может быть список предметов. Когда я нажимаю на заказ, я получаю список элементов в следующем формате:

{ 
    "count": 2, 
    "items": [ 
     { 
      "name": "Green pillow", 
      "status": "pending" 
     }, 
     { 
      "name": "Red pillow", 
      "status": "delivered" 
     } 
    ] 
} 

Список заказов обновляется автоматически и может изменяться в любое время, поэтому я храню список заказов в this.state, который обновляется с помощью AJAX , this.state выглядит следующим образом:

{ 
    "orders": [ 
     { 
      "order_number": 55981, 
      "customer_number": 24742 
     }, 
     { 
      "order_number": 55980, 
      "customer_number": 24055 
     } 
    ] 
} 

Моя проблема заключается в том, что я хотел бы, что, когда я нажимаю на заказ, состояние обновляется так, что щелкнули порядок содержит элементы, связанные с этим порядок. Список заказов будет выглядеть после нажатия на элемент:

{ 
    "count": 2, 
    "orders": [ 
     { 
      "order_number": 55981, 
      "customer_number": 24742, 
      "items": [ 
       { 
        "name": "Green pillow", 
        "status": "pending" 
       } 
      ] 
     }, 
     { 
      "order_number": 55980, 
      "customer_number": 24055 
     } 
    ] 
} 

Как я могу добавить элементы в определенном порядке с использованием this.setState()? Проблема в том, что setState, похоже, обновляет данные с помощью ключей, но мои заказы находятся в массиве. Возможно, я могу скопировать весь массив и поместить ключ элементов внутри, но это кажется излишним. Я принимаю неправильный подход?

Answer 1

Я не совсем уверен, что у меня есть ваш вопрос, но я думаю, что то, что вы пытаетесь достичь, это добавить новые заказы на массив (push), который находится в вашем состоянии.

Если это так, то вы должны что-то вроде этого:

// since you're orders it's not a plain array, you will have 
// to deep clone it (e.g. with lodash) 

let orders = _.clone(this.state.orders); 
orders.push(newOrder); 
this.setState(orders); 

Почему клонировать состояние до изменения это важно?

Неизменимость поставляется с некоторыми отличными свойствами (например, простое сравнение равенства), и команда React стремится к этому направлению, чтобы повысить производительность все больше и больше.

По Реагировать 0,13 мутирует state без вызова this.setState вызовет предупреждение, и он сломается полностью в каком-то момент в РЕАКТЕ будущем (см the docs)

Надеется, что это помогает

Answer 2

Сделайте копию тока изменить, скопировать и использовать его в качестве нового состояния.

Это простой пример. Возможно, вы захотите добавить некоторую логику кэширования, чтобы вам не приходилось снова и снова извлекать элемент заказа, когда пользователь несколько раз нажимал один и тот же порядок.

var updatedOrder = _.clone(this.state.orders); 

updatedOrder[0]["items"] = [ { "name": "Foo", "status":"bar" } ]; 

this.setState({ 
    orders: updatedOrder 
});