Javascript 如何修复：Meteor方法使用onClick或onKeyPress和React发射两次

始终选中：

你好,

在我的数据库中，我发现Meteor方法已经在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>

类应答扩展组件{
...
validAnswer（）{
...
瓦利丹斯沃电话({
...
});
}
...
render（）{
返回(
...
{this.validAnswer（）；}}
onKeyPress={（e）=>{if（e.key=='Enter'）this.validAnswer（）；}
tabIndex=“0”
>嗯

如何修复此错误？

---

谢谢

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

类应答扩展组件{
i处理：false，
validAnswer（）{
如果（此.isProcessing）返回；
this.isProcessing=true；
validAnswer.call（{}，（）=>{
this.isProcessing=false；
});
}
render（）{
返回(
{this.validAnswer（）；}}
onKeyPress={（e）=>{
如果（e.key==='Enter'）这个.validAnswer（）；
}}
tabIndex=“0”
>
好啊
);
}
}

我发现了错误

该漏洞来自服务器断开连接

当服务器断开连接，用户单击调用方法的按钮时……所以……什么也不会发生……用户继续单击按钮，Meteor会将所有操作保存在内存中

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

因此，该方法被多次调用

---

希望，我很清楚；-）

这只是偶尔发生吗？如果是这样，很可能是在重新连接后重新运行，或者在失败后重试。@MasterAM：在数据库之后，是的，这是非常罕见的。那么日志呢？有关于服务器重新启动时错误或方法重新运行的报告吗？谢谢，但有了您的解决方案，我需要在我的所有程序中都这样做吗？知道我臭虫的来源吗？知道。你的错误是用户可以处理这个方法两次，这就阻止了它。您可以创建一个包含此逻辑的高阶组件，然后在需要调用方法的任何位置使用此组件。我认为您仍然应该接受我的答案作为有效答案，因为服务器上长期运行的任务就像断开连接一样。您需要客户端验证来检查服务器方法调用是否已完成，否则还将获得重复的调用。此外，双击按钮也会导致方法被调用两次——我建议的客户端验证检查解决了这一问题。

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