如何修复：使用 onClick 或使用 React 的 onKeyPress 触发 Meteor 方法两次答案

【问题标题】：How fix : Meteor Method fired twice with onClick or onKeyPress with React如何修复：使用 onClick 或使用 React 的 onKeyPress 触发 Meteor 方法两次
【发布时间】：2018-05-20 14:02:27
【问题描述】：

始终选中：

你好，

我在我的数据库中发现 Meteor 方法已通过单击或按键执行了多次。

我没有设法触发错误。

这是我的代码：

class Answering extends Component {
...

validAnswer() {
  ...

  validAnswer.call({
    ...
  });
}
...
render() {
    return (
...
<div
  id="Answering-button-next"
  role="button"
  onClick={() => { this.validAnswer(); }}
  onKeyPress={(e) => { if (e.key === 'Enter') this.validAnswer(); }}
  tabIndex="0"
>OK
</div>

如何修复此错误？

谢谢

【问题讨论】：

只是偶尔发生吗？如果是这样，很可能是重新连接后重新运行或失败后重试。
@MasterAM : 关注数据库，是的，非常非常罕见。
日志呢？是否有关于服务器重启时错误或方法重新运行的报告？

标签： javascript reactjs meteor onclick keypress

【解决方案1】：

您应该能够将类属性用作本地类变量。使用它来检查当前请求是否正在处理。如果它正在处理，则提前返回，因此不会调用该方法。如果未处理，则将其切换为正在处理，并在服务器请求完成时在方法回调中将其设置回不处理。这将防止在回调运行之前发生重复（表明服务器方法响应成功）。

class Answering extends Component {
    isProcessing: false,

    validAnswer() {
        if (this.isProcessing) return;
        this.isProcessing = true;
        validAnswer.call({}, () => {
            this.isProcessing = false;
        });
    }

    render() {
        return (
            <div
                id="Answering-button-next"
                role="button"
                onClick={() => { this.validAnswer(); }}
                onKeyPress={(e) => {
                    if (e.key === 'Enter') this.validAnswer();
                }}
                tabIndex="0"
            >
                OK
            </div>
        );
    }
}

【讨论】：

谢谢，但是有了您的解决方案，我需要在所有程序中执行此操作吗？关于我的错误来源的任何想法？
是的。您的错误是用户能够两次处理该方法，这可以防止它。您可以创建一个包含此逻辑的高阶组件，然后在需要调用方法的任何地方使用此组件。

【解决方案2】：

我发现了错误，

这个bug来自于服务器断开。

当您的服务器断开连接并且用户单击调用方法的按钮...所以...没有任何反应...并且用户继续单击该按钮并且 Meteor 将所有操作保留在内存中。

然后，当服务器恢复并打开时，所有客户端请求都发送到服务器。

因此，该方法被多次调用。

希望，我很清楚 ;-)

【讨论】：

我认为您仍然应该接受我的答案作为有效答案，因为服务器上长时间运行的任务就像断开连接一样。您需要客户端验证以检查服务器方法调用是否已完成，否则您还将获得重复的调用。此外，双击您的按钮也会导致该方法被调用两次——我建议的客户端验证检查解决了这个问题。