Question

我有一个输入是文件上传，现在发生onChange事件时，将提取文件大小并检查大小。

如果尺寸较大，这是不好的做法，那么我可以接受它会显示烤面包错误。

我正在商店中生成Toast错误，我不确定是否应该更改它，以便在react组件中生成Toast错误。

<input
  className="file-input"
  type="file"
  name="resume"
  accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
  onChange={event => myStore.fileUpload(event)}
/>

@action
fileUpload(event) {
  // some other code, like extracting out the data if all checks pass.
  toast.error(`Files cannot exceed ${sizeLimitMb} MB`, { autoClose: 60000 });
}

Answer 1

这样想：

如果没有UI，您是否还需要处理上传失败？我假设对于您的用例，答案是 yes 。

这意味着您需要在应用程序中以“用例”级别指示故障的机制。可能是Mobx可观察到的，或者只是从文件上传器返回了被拒绝的承诺，...

现在，如何向用户显示失败警告是一个单独的问题（例如，通过UI Toast）。另外，发生此类问题时，您可能还想做其他事情，例如记录日志等。

因此，您可以解决此问题并保持关注点分离的一种方法是拥有FileUploader这样的业务模型，其唯一目的是上传文件，完全不了解UI，通知等。但是，它应该以一种或另一种方式返回其操作的成功或失败。

然后，您可以处理此失败，从而无法通过mobx存储，UI通知/敬酒服务等单独显示敬酒...

Mobx商店中的吐司通知？不良做法？

1 个答案: