乐观的用户界面反应，swr，沉浸

问题描述

我希望对乐观的ui模式的“我的”实现进行简短的代码回顾。我正在使用SWR，沉浸器和自定义获取挂钩来完成大部分繁重的工作。但是，我不确定这是否确实是这样做的方法。特别是在为临时生成的项目分配临时ID时。我不应该在某个地方清除它吗？可能会引起问题吗？

const spawn = async flavour => {
    const payload = {
      planId: flavour.id,name: 'test',description: '',}
    mutate(
      '/account/instances',produce(draft => {
        draft.push({
          ...payload,id: uuid(),plan: {name: flavour.name},state: {status: 'PENDING'},image: {name: flavour.image.name},})
      }),false
    )
    mutate(
      '/account/instances',await doFetch('/account/instances','post',payload)
    )
  }

谢谢！

解决方法

你的代码对我来说似乎是正确的。它将乐观地更新 UI，从后端获取数据，如果数据不同，则使用该数据再次更新 UI。

关于生成的 id，这真的取决于你用它做什么。如果您没有做任何重要的事情，那可能没问题，因为当后端回复时，该 ID 将被真实的 ID 覆盖。但是如果你向用户展示它可能会导致问题（用户会看到它正在更新），或者如果你提供基于它的操作则更糟。

我还想提请您注意，由于网络原因或与后端问题相关的原因，回复可能会失败。在这种情况下，如果您只收到错误或从未收到任何回复，您的 UI 将保持不正确状态，直到 swr 下一次成功获取。 为了避免此类问题，您可能会对use-mutation感兴趣。这是一个小库，旨在与 swr 一起使用，以在出现错误时回滚乐观更新的数据。