0

我正在使用HOC带有突变的 graphql 作为输入类型checkbox。我还为它添加了乐观的 UI 更新选项。选中该框将触发一个突变，value=true取消选中将触发一个突变value=false。

但问题是快速点击会导致对服务器的多次突变调用，并且响应存在延迟。同时optimisticResponse更新完成它的工作并切换复选框。当服务器响应到达时，再次调用更新函数并切换复选框，导致 UI 出现故障。

让我总结一下我可以预期的流程

点击顺序：

Check => Uncheck => Check

UI 更新顺序：

Check(optimistic response) => Uncheck(optimistic response) => Check(server response) => Check(Optimistic response) => Uncheck(server response) => Check(server response)

有没有办法消除这些故障？

4

1 回答 1

0

可能有更好的选择，但这里有两个我想出的：

1) 将 break value=true 和 value=false 更改为单独的函数。这样，您的乐观响应和真正的更新函数都执行相同的操作。他们都会调用 value=true 或 value=false。

2）对于您的乐观反应，您可以添加一个额外的参数optimistic=true。然后在你的更新函数中，你可以检查乐观是否为真。如果是，请继续进行更新。在此检查之后，您可以检查突变的响应。如果突变返回错误，请将值设置回来。如果它没有返回错误，则什么也不做。

if(optimistic) {
  setValue(); // Sets it to optimistic result
  return;
}
if(response returns error) {
  setValue(); // Returns it back to original state
  return
}

在我看来，更好的选择是使用 1，但如果这不可能，您可以使用 2 作为黑客选项。

于 2018-09-06T17:02:04.697 回答