让高阶组件成为观察者 - Mobx React
Making higher order components observers - Mobx React
我有一个包含三个主要组件的应用程序。表单允许用户 select 项目，预览显示那些项目，AppStore 是一个 Mobx 商店。该按钮似乎工作正常，将项目添加到商店，但预览组件不会重新呈现以响应更改。我认为这可能是因为我为拖放功能使用了高阶组件。有人知道如何让这些与 Mobx 一起工作吗？
项目可以在这里找到（我目前唯一链接的按钮是 'Banner Image' 添加一个项目和 'Remove' 应该删除它）：https://codesandbox.io/s/vnooqvn8yy
我认为问题在于 SortableList 需要传递一个常规 javascript 数组，而不是一个可观察数组。
<SortableList items={AppStore.currentBlocks.slice()} onSortEnd={this.onSortEnd} />
来自 mobx 文档：
...whenever you need to pass an observable array to an external library, it is a good idea to create a shallow copy before passing it to other libraries or built-in functions (which is good practice anyway) by using array.slice()
我有一个包含三个主要组件的应用程序。表单允许用户 select 项目，预览显示那些项目，AppStore 是一个 Mobx 商店。该按钮似乎工作正常，将项目添加到商店，但预览组件不会重新呈现以响应更改。我认为这可能是因为我为拖放功能使用了高阶组件。有人知道如何让这些与 Mobx 一起工作吗？
项目可以在这里找到（我目前唯一链接的按钮是 'Banner Image' 添加一个项目和 'Remove' 应该删除它）：https://codesandbox.io/s/vnooqvn8yy
我认为问题在于 SortableList 需要传递一个常规 javascript 数组，而不是一个可观察数组。
<SortableList items={AppStore.currentBlocks.slice()} onSortEnd={this.onSortEnd} />
来自 mobx 文档：
...whenever you need to pass an observable array to an external library, it is a good idea to create a shallow copy before passing it to other libraries or built-in functions (which is good practice anyway) by using array.slice()