时间戳

首页 > 解决方案 > React 似乎同时执行了两个函数

javascript - React 似乎同时执行了两个函数

问题描述

我做了一个简单的石头剪刀布游戏。在onclick我调用一个函数来添加一个数字并改变状态。在该函数中，我再调用 2 个函数，其中一个选择 1 到 3 之间的随机数并将其转换为石头/纸/剪刀并将其分配给状态，然后另一个函数找出谁赢了：

addToInput = val =>{
    this.setState({ 
        input:val
    });

    this.picknum();
    this.pickwin();       
}

https://codepen.io/russiandobby/pen/xeRYzw?editors=0002

起初我以为会picknum同时pickwin被执行，但是即使我尝试在其中调用pickwin仍然picknum无法正常工作。

似乎发生的是，在pickwin执行时，它会查看旧状态，而不是被更改的状态picknum。

我该如何解决这个问题？

标签： javascriptreactjs

解决方案

setState 是异步的（或者至少可以是异步的），因此无法保证在您进入下一行代码时状态已更新如果您需要在设置状态后运行某些内容，请将其放入componentDidUpdate 生命周期挂钩，或者将回调作为第二个参数传递给 setState。

例如，您可以跳过在 addToInput 函数中执行 pickWin ，而是使用像这样的 componentDidUpdate 函数：

componentDidUpdate(prevProps, prevState) {
  this.pickWin();
}

也就是说，与其设置状态，然后等待它更新，然后再次设置状态，我建议您重构代码以仅调用 setState 一次。如果你多次调用它，你有可能导致多次渲染，但看起来这些都是为了成为同一操作的一部分。也许更新您的 pickNum 和 pickWin 函数以返回一个值，而不是设置状态本身，然后使用结果调用 setState 一次

picknum () {
  let aipick = ["rock","paper","scisors"];   
  let temp = Math.floor(Math.random() * 3) + 0  ;
  return aipick[temp]
}

pickWin(userChoice, aiChoice) {
  if (userChoice === 'rock' && aiChoice == 'scisors') {
    return 'USER WINS';
  }
  // etc
}

addToInput = val => {
  let aiChoice = pickNum();
  let winner = pickWin(val, aiNum);
  this.setState({
    aiChoice: aiChoice,
    whowon: winner,
    input: val,
  })
}

推荐阅读