Создание наблюдателей компонентов более высокого порядка - Mobx React

Question

У меня есть приложение с тремя основными компонентами.Форма позволяет пользователям выбирать элементы, Предварительный просмотр показывает эти элементы, AppStore - это магазин Mobx.Кнопка работает нормально, добавляя элементы в хранилище, но компонент Preview не выполняет повторную визуализацию в ответ на изменения.Я думаю, что это может быть потому, что я использую компонент более высокого порядка для своей функции перетаскивания.Кто-нибудь знает что-нибудь о том, как заставить их работать с Mobx?

Проект можно найти здесь (единственными кнопками, которые я связал в данный момент, являются 'Banner Image', который добавляет элемент, и 'Remove', которыйследует удалить): https://codesandbox.io/s/vnooqvn8yy

Answer 1

Я думаю, что проблема в том, что SortableList нужно передать обычный массив javascript, а не наблюдаемый массив.

<SortableList items={AppStore.currentBlocks.slice()} onSortEnd={this.onSortEnd} />

Из документов mobx:

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