Реактивный дисплей не обновляется правильно

Question

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

Это часть кода внутри моей функции рендеринга, которая создает список.

this.state.shoppingItems ? this.state.shoppingItems.currentShoppingItems.map((item, index) => {
    console.log(item)
    return <ItemSummary key={index} onClickHandler={this.selectItem} updateShoppingItem={this.updateCurrentShoppingItem} shoppingItem={item} removeFromCurrentItems={this.removeFromCurrentItems} addToCurrentList={this.addToCurrentList} />
}) : undefined} 

Вот код, который создает предыдущий список элементов:

this.state.shoppingItems ? this.state.shoppingItems.previousShoppingItems.map((item, index) => {
    console.log(item)
    return <ItemSummary key={index} onClickHandler={this.selectItem} updateShoppingItem={this.updateCurrentShoppingItem} shoppingItem={item} removeFromCurrentItems={this.removeFromCurrentItems} addToCurrentList={this.addToCurrentList} />
}) : undefined} 

Этот метод удаляет элемент из текущего списка и добавляет его в предыдущий список, где возникает проблема.

removeFromCurrentItems(shoppingItem) {
        const items = this.state.shoppingItems.currentShoppingItems.filter(item => item._id !== shoppingItem._id);
        let shoppingItems = this.state.shoppingItems;
        shoppingItems.currentShoppingItems = items;
        shoppingItem.number = 0;
        shoppingItem.completed = false;
        shoppingItems.previousShoppingItems.push(shoppingItem);
        this.setState({
            shoppingItems: shoppingItems
        });
        // call to API to update in database
    }

Вот список прежде чем я удалю предмет.

Вот список после удаления среднего элемента:

Наконец, вот вывод console.log, который показывает, что элементы были обновлены должным образом, но дисплей не обновился:

Я совершенно новичок, чтобы отреагировать из angular, поэтому я понятия не имею, правильно ли это сделать или есть лучший способ. Но может ли кто-нибудь помочь мне понять, почему дисплей не обновляется?

Answer 1

Проблема в обновлении для shoppingItems. Вы сохраняете ссылку на текущий объект состояния, изменяете его и сохраняете обратно в состоянии. Распространение this.state.shoppingItems в новый объект сначала создаст новую ссылку на объект для реагирования, чтобы подхватить изменение.

React использует сравнение мелкого объекта предыдущих значений состояния и реквизита для следующего состояния и значений реквизита для вычисления того, что необходимо повторно отобразить в DOM и на экране.

removeFromCurrentItems(shoppingItem) {
  const items = this.state.shoppingItems.currentShoppingItems.filter(item => item._id !== shoppingItem._id);

  const shoppingItems = {...this.state.shoppingItems};
  shoppingItems.currentShoppingItems = items;
  shoppingItem.number = 0;
  shoppingItem.completed = false;
  shoppingItems.previousShoppingItems.push(shoppingItem);
  this.setState({
    shoppingItems: shoppingItems
  });
  // call to API to update in database
}

Answer 2

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

return <ItemSummary key={task._id} updateShoppingItem={this.updateCurrentShoppingItem} shoppingItem={task} removeFromCurrentItems={this.removeFromCurrentItems} addToCurrentList={this.addToCurrentList} />

Аналогичный ответ здесь: Изменение в состояние реакции не обновляет отображение в функциональном компоненте