暴徒-状态树操作由于保护而失败。

Question

在下面的商店中，我尝试上传一些照片，并希望随着进度更新UI。这是我的主店：

const Store = types
  .model({
    photos: types.array(Photo),
    isLoading: false,
  })
  .actions((self) => {
    return {
      addPhoto(url: string) {
        console.log("Add photo: ", url);
        const photo = Photo.create({ url });
        self.photos.push(photo);
      },
      send: flow(function* () {
        self.isLoading = true;
        console.log("Uploading photos...");
        for (let i = 0; i < self.photos.length; i += 1) {
          yield self.photos[i].upload();
        }
        console.log("Completed");
        self.isLoading = false;
      }),
    };
  });

但是，当我触发发送操作时，我会得到错误：

mobx-状态树不能修改‘匿名模型@/照片/0’，对象受到保护，只能使用操作进行修改。

这是照片模型：

const Photo = types
  .model({
    url: types.string,
    progress: types.optional(types.number, 0),
    isLoading: false,
  })
  .actions((self) => {
    const dummyUpload = (duration: number, callback?: Callback) =>
      new Promise((resolve) => {
        let progress = 0;
        const interval = setInterval(() => {
          progress += 0.2;
          callback?.(progress);
          if (progress >= 1) {
            clearInterval(interval);
            resolve(undefined);
          }
        }, duration / 5);
      });

    return {
      upload: flow(function* () {
        self.isLoading = true;
        yield dummyUpload(3000, (progress) => {
           self.progress = progress;
         });
        self.isLoading = false;
      }),
    };
  });

注意:现在我有一个带有进度回调的虚拟上传操作。

我不明白为什么错误声明存储在操作之外被修改，因为我相信它是在Photo.upload操作中执行的。

有人能告诉我上面的代码有什么问题吗？

下面是一个代码框，可以查看它的运行情况：https://codesandbox.io/s/mutable-pine-ukm5sv

Answer 1

dummyUpload将通过使用yield正确处理，但进度回调函数不会。

例如，您可以使用进度回调创建一个单独的actions块，使其成为一个操作，并且它将按预期工作：

const Photo = types
  .model({
    url: types.string,
    progress: types.optional(types.number, 0),
    isLoading: false
  })
  .actions((self) => ({
    setProgress(progress: number) {
      self.progress = progress;
    }
  }))
  .actions((self) => {
    // ...
    
    return {
      upload: flow(function* () {
        self.isLoading = true;
        yield dummyUpload(3000, self.setProgress);
        self.isLoading = false;
      })
    };
  });