Question

在我的React组件中，有一个按钮可以更新我的分数

net.sf.jasperreports.export.csv.field.enclosure -> "

当按钮被触发时，用户在操作过程中不能按下按钮 2秒，否则得分重置为0

当他按下按钮时，分数将增加1

在我的Iphone和Android模拟器上，当我多次按下按钮时，应用崩溃，而且我不知道如何优化代码以避免崩溃

任何解决方案吗？

Answer 1

为什么要使用setTimeOut？

尝试下面的代码

class Game extends React.Component {
  state = {
    score: 0,
    isButtonClickable: true
  }

  onPress() {
    const {isButtonClickable, score} = this.state
    if (isButtonClickable) {
      setTimeout(() => {
        this.setState({isButtonClickable: true})
      }, 2000)
    }
    const newScore = isButtonClickable ? score + 1 : 0
    this.setState({isButtonClickable: false, score: newScore})
  }

  render() {

    return(
    <View>
      <View>{this.state.score}</View>
      <Button onPress={() => this.onPress()} disabled={!this.state.isButtonClickable}>Click</Button>
    </View>)
  }
}

Answer 2

在超时期间，您永远不会清除它，因此此代码：

setTimeout(() => {
        this.setState({isButtonClickable: true})
      }, 2000)

将每2秒钟一直运行一次，然后单击4次-您将有4次超时来设置状态。

在这里阅读有关超时的信息：

https://www.w3schools.com/jsref/met_win_settimeout.asp

使用：

 let myVar = setTimeout(() => {
        this.setState({isButtonClickable: true})
      }, 2000);

要停止使用：

 clearTimeout(myVar);

Answer 3

如果您希望用户在2s延迟之前单击按钮，并且您的分数为0，并且应用程序崩溃也没有问题，则可以使用2个不同的按钮。 1用于添加和更改isButtonClickable状态，1用于返回0。

render() {
  return (
  <div>
    <p>{this.state.score}</p>
    {this.state.isButtonClickable ? (
       <button onClick={() => this.onPress()}>aaaa</button>
    ):(
       <button onClick={() => this.makeZero()}>aaaa</button>
    )}

  </div>
)};

您的makeZero（或您的称呼方式）应放置在Class内

 makeZero = () => {
   this.setState({ score: 0})
 }

请参见小提琴-> jsFIddle

多次响应本机调用setState使应用程序崩溃

3 个答案: