Как наблюдать изменения object.property на наблюдаемом массиве с помощью mobx - PullRequest
Новая
       6

Как наблюдать изменения object.property на наблюдаемом массиве с помощью mobx

0 голосов
/ 03 декабря 2018

Я использую реагирование и моб.У меня есть наблюдаемый массив объектов Item, и я пытаюсь отобразить их и показать изменения свойств «вживую», наблюдая за свойствами объектов в массиве.Изменения не инициируются событием щелчка на каком-либо из компонентов, но являются ответом на вызов API.

Я понимаю, что изменения свойств объектов в массиве не приведут к повторной визуализации всего списка(что хорошо), но я не могу заставить его повторно визуализировать единственный компонент Item, который должен наблюдать свойства объекта Item.

Я пробовал пару способов заставить объекты Item в массиве быть наблюдаемыми, но ни один из них не работает для меня:

  • , вызывающий 'extendObservable () из элементаконструктор
  • присваивание props.item члену класса, украшенному '@observable'
  • , вызывающему наблюдаемый конструктор и передающему объект item следующим образом: const item = observable (item)
  • Передача поля 'hasUnreadData' в качестве отдельного реквизита и обеспечение его наблюдения через 'observable.box (item.hasUnreadData).

Вот несколько упрощенных примеров кода (в машинописном тексте): 

class Item {

  id : string
  hasUnreadData : boolean

  constructor (data: any) {
    this.id = data.id;
    // false by default
    this.hasUnreadData = data.hasUnreadData;
  }

}

@observable items: Item[];

// observes the array and re-renders when items are added/removed (this works)
@observer
class ItemListComponent extends React.Component {
  render() {
    return (
      <List> {
        items.map((item: Item, index) => {

          <ItemComponent key={item.id} itemModel={item} />

        }
      }
    )
  }
}

// should observe the 'hasUnreadData' flag and apply different styles when it re-renders (but this does not work, it only displays the initial state)
@observer
class ItemComponent extends React.Component {
  render() {
    const item = this.props.item;
    return (
      <ListItem button divider selected={item.hasUnreadData} />
    )

  }
}


// imagine this is a promise from an API call
API.fetchData().then((itemId: string) => {
  itemToUpdate = items.find(i => i.id === itemId);
  itemToUpdate.hasUnreadData = true; 
  // this does not trigger the ItemComponent to render again as expected.
});

Нужно ли клонировать или иным образом "заново создать" объект Item для запуска рендера?Или я допускаю очевидную ошибку здесь?Любая помощь приветствуется.

...