javascript - 如何修复 : Meteor Method fired twice with onClick or onKeyPress with React

Question

始终选中:

• Can Meteor call a method on the server twice if the client gets disconnected?
• OnClick Event gets fired twice
• 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 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>
        );
    }
}