Reactjs 乐观用户界面（反应、swr、伊默）

我希望对乐观ui模式的“我的”实现做一个简短的代码回顾。我使用SWR、immer和一个定制的抓钩来完成大部分的重物搬运。然而，我不确定这是否真的是一种方法。特别是在为乐观生成的项目分配临时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)
    )
  }

---

谢谢

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

关于生成的id，这实际上取决于您如何使用它。如果您不做任何重要的事情，它可能会正常，因为当后端回复时，该id将被真实id覆盖。但是，如果您将其显示给用户（用户将看到它正在更新），则可能会导致问题，如果您提供基于它的操作，则情况更糟

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