Question

我希望对乐观的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)
    )
  }

谢谢！

Answer 1

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

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

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

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

1 个答案: