Question

始终检查：

您好，

我在我的数据库中发现Meteor Method已经从click或keypress执行了好几次。

我没有设法触发错误。

这是我的代码：

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

Answer 2

我发现了这个错误，

该错误来自服务器断开连接。

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

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

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

希望，我很清楚; - ）

怎么修复：Meteor方法用onClick或onKeyPress用React激发了两次

2 个答案: