确保 onPress 函数仅调用一次即可单击的方法

Question

我尝试使用类似信号量的概念：

• 函数检查了 this.state.clicked，如果为 true，则返回而不执行逻辑，如果不是：
• this.state.clicked 设置为 true。
• 函数执行逻辑。
• this.state.clicked 被设置为 false。

这通常有效，但在极端情况下，当可点击内容被垃圾邮件发送时，所有事件之间似乎发生了某种竞争条件，有时我会得到函数逻辑的两次执行。

需要视觉对象的代码示例：

<ClickableComponent onPress={() => { 
     if (this.state.clicked) return;
     this.state.clicked = true;
     // Execute logic here
     // This logic sometime gets executed twice when the clicking is fast enough
     this.state.clicked = false;
     }}
} />

关于不同方法的任何想法？

Answer 1

您无法直接设置state。并且您必须在setState的回调中执行逻辑。

<ClickableComponent onPress={() => { 
  if (this.state.clicked) return;
  this.setState({ clicked: true }, () => {
    // Execute logic here
    this.setState({ clicked: false });
  });
} />