解决方法：Meteor Method 使用 onClick 或 onKeyPress 使用 React 触发两次

Question

始终选中：

Can Meteor call a method on the server twice if the client gets disconnected?
JavaScript multiple keys pressed at once
Detect multiple keys on single keypress event in jQuery
https://therelentlessfrontend.com/2012/11/13/detect-multiple-key-press-in-javascript-for-your-website/
Prevent JavaScript keydown event from being handled multiple times while held down
Can Meteor call a method on the server twice if the client gets disconnected?
https://groups.google.com/forum/#!msg/meteor-talk/j1YF7JO5Rdo/cYHR5kbhC8UJ

您好，

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

我没能触发错误。

这是我的代码：

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>

如何修复这个错误？

谢谢

Answer 1

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

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>
        );
    }
}

Answer 2

我发现了错误，

BUG来自服务器断开连接

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

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

因此，该方法被调用了几次。

希望，我很清楚 ;-)

解决方法：Meteor Method 使用 onClick 或 onKeyPress 使用 React 触发两次

How fix : Meteor Method fired twice with onClick or onKeyPress with React

javascript

keypress

onclick

meteor

reactjs