如何修复:流星方法使用onClick或onKeyPress与React触发两次

Question

始终选中：

• 如果客户端断开连接，Meteor 可以在服务器上调用一个方法两次吗？
• 点击事件被触发两次
• 一次按下多个键
JavaScript
• 在 jQuery 中检测单个按键事件上的多个键
• https://therelentlessfrontend.com/2012/11/13/detect-multiple-key-press-in-javascript-for-your-website/
• 防止按住时多次处理 JavaScript 键关闭事件
• 如果客户端断开连接，Meteor 可以在服务器上调用一个方法两次吗？
• https://groups.google.com/forum/#!msg/meteor-talk/j1YF7JO5Rdo/cYHR5kbhC8UJ

你好

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

我无法触发该错误。

这是我的代码：

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

我发现了这个错误，

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

当您的服务器断开连接并且用户单击调用方法的按钮时...所以。。。什么也没发生...和用户继续点击按钮，流星将所有动作保留在内存中。

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

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

希望，我很清楚;-(