让高阶组件成为观察者 - Mobx React答案

【问题标题】：Making higher order components observers - Mobx React让高阶组件成为观察者 - Mobx React
【发布时间】：2018-12-29 01:02:58
【问题描述】：

我有一个包含三个主要组件的应用程序。 Form 允许用户选择项目，Preview 显示这些项目，AppStore 是 Mobx 商店。该按钮似乎工作正常，将项目添加到商店，但预览组件没有重新渲染以响应更改。我认为这可能是因为我在拖放功能中使用了更高阶的组件。有人知道如何让这些与 Mobx 一起使用吗？

可以在这里找到该项目（我目前链接的唯一按钮是添加项目的“横幅图像”和应该删除项目的“删除”）：https://codesandbox.io/s/vnooqvn8yy

【问题讨论】：

标签： javascript reactjs mobx mobx-react

【解决方案1】：

我认为问题在于 SortableList 需要传递一个常规的 javascript 数组，而不是可观察的数组。

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

来自 mobx 文档：

...当您需要将可观察数组传递给外部库时，最好在将其传递给其他库或内置函数之前创建一个浅拷贝，使用 array.slice()

【讨论】：