时间戳

首页 > 解决方案 > 制作高阶组件观察者 - Mobx React

javascript - 制作高阶组件观察者 - Mobx React

问题描述

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

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

标签： javascriptreactjsmobxmobx-react

解决方案

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

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

来自 mobx 文档：

...每当您需要将可观察数组传递给外部库时，最好先创建一个浅拷贝，然后再将其传递给其他库或内置函数（无论如何这都是很好的做法），方法是使用array.slice( )

推荐阅读