用mobx反应Sortable JS

问题描述

我正在构建一个功能组件，该组件应使用可计算的数组（layers数组）呈现一个可排序的组件（ReactSortable），该数组来自使用react-sortablejs来自mobx存储的数组。该组件在应用程序加载时呈现，但是在通过拖放元素重新排列数组时，出现以下错误：

mobx.module.js：89未捕获的错误：[mobx]由于启用了严格模式，因此不允许在操作之外更改观察到的可观察值。如果需要进行此更改，请将代码包装在action中。试图修改：[e-mail]？ 实际上，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是否支持此事件挂钩。