如何解决用mobx反应Sortable JS
我正在构建一个功能组件,该组件应使用可计算的数组(layers数组)呈现一个可排序的组件(ReactSortable),该数组来自使用react-sortablejs来自mobx存储的数组。该组件在应用程序加载时呈现,但是在通过拖放元素重新排列数组时,出现以下错误:
mobx.module.js:89未捕获的错误:[mobx]由于启用了严格模式,因此不允许在操作之外更改观察到的可观察值。如果需要进行此更改,请将代码包装在action
中。试图修改:LayerStore@23.layersRegistry.9f332395-6bfe-4c3f-a496-8804e1dec490.chosen?
实际上,layers数组是根据商店中可观察到的layersRegistry Map计算出来的,如下面的代码所示,但是在对图层进行排序时,我并没有更改layersRegistry可观察到的值;这就是为什么我对错误感到困惑。
这种情况下的问题是什么,如何解决该问题,以便当我通过拖动拖放图层(通过拖放)时,商店中的图层变量或可注册的图层Registry Map会根据排序进行更新? 这里是组件的代码
import React,{ useContext,useEffect,Fragment,useState } from "react";
import { RootStoreContext } from "../../../app/stores/rootStore";
import { observer } from "mobx-react-lite";
import LayerListItem from "./LayerListItem";
import { ReactSortable } from "react-sortablejs";
export const LayersDashboard = () => {
const rootStore = useContext(RootStoreContext);
const { layers,loadLayers } = rootStore.layerstore;
useEffect(() => {
loadLayers();
},[loadLayers]);
const [items,setItems] = useState(layers);
return (
<Fragment>
<ReactSortable list={layers} setList={setItems}>
{layers.map((layer) => (
<LayerListItem key={layer.id} layer={layer} />
))}
</ReactSortable>
</Fragment>
);
};
export default observer(LayersDashboard);
这是商店的代码
import { observable,action,runInAction,computed } from "mobx";
import agent from "../api/agent";
import { RootStore } from "./rootStore";
import { ILayer } from "../models/Layer";
export default class LayerStore {
rootStore: RootStore;
constructor(rootStore: RootStore) {
this.rootStore = rootStore;
}
@observable layersRegistry = new Map();
@computed get layers() {
return Array.from(this.layersRegistry.values());
}
@action loadLayers = async () => {
try {
const layers = await agent.Layers.list();
runInAction(() => {
layers.forEach((layer) => {
this.layersRegistry.set(layer.id,layer);
});
});
} catch (error) {
runInAction(() => {
console.log("error");
});
}
};
}
解决方法
我建议在将数据传递到ReactSortable或任何其他库之前,先对您的数据调用toJS,并使可观察的数据与可排序的数据保持同步,您将需要使用一些onDragEnd事件钩子并从中调用mobx操作在那里更新可观察的数据。但是我不确定react-sortablejs是否支持此事件挂钩。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。