Javascript 使用钩子基于条件渲染状态（构建一个简单的石头剪刀游戏）

我试图通过重写一个“石头剪纸”游戏来学习React.js中的钩子。当我按下“选择”按钮时，无法同时对获胜者进行评估。这是我的代码（这是一个较短的代码，我只比较了按纸张按钮的播放器）：

函数应用程序（）{
常量武器=[“布”、“剪刀”、“石头”]；
const[choice，setChoice]=useState({
游戏向导：“，
playerTwo:“，
获胜者：“
})
const CHOOSEEAPON=（武器）=>{
setChoice({
队长：武器，
玩家二：武器[Math.floor（Math.random（）*3）]，
获胜者：getWinner（选择。玩家向导，选择。玩家二）
})
}
const getWinner=（player1，player2）=>{
如果（播放器1==“纸张”）{
如果（玩家2==“剪刀”）{
返回（“玩家二赢”）
}否则如果（玩家2==“摇滚乐”）{
返回（“玩家一赢了！！！”）
}
}
}
返回(
剪刀蜥蜴
玩家一：{choice.playeron}
玩家二：{choice.playerTwo}
{choice.winner}
选择EAPON（“纸张”）}>纸张
选择EAPON（“剪刀”）}>剪刀
选择EAPON（“岩石”）}>岩石
);
}
导出默认应用程序；

基本上，当我点击“纸张”按钮时，我会在屏幕上显示每个玩家的选择，但我只有在再次按下后才能获得赢家状态。赢家渲染总是落后一步。我怎样才能解决这个问题

---

谢谢你们

在传递参数以确定游戏赢家的函数中：

setChoice({
  playerOne: weapon,
  playerTwo: weapons[Math.floor(Math.random() * 3)],
  winner: getWinner(choice.playerOne,choice.playerTwo)
})

此处尚未设置您所指的

choice.playerne

和

choice.player2

。您需要做的是通过当前选择的playerOne和playerTwo

const playerOne = weapon;
const playerTwo = weapons[Math.floor(Math.random() * 3)];
setChoice({
  playerOne,
  playerTwo,
  winner: getWinner(playerOne, playerTwo),
})

---

状态更新不会立即发生，但会在下一个渲染周期中发生，因此，当您期望winner变量将基于玩家1和玩家2的选择进行求值时，它实际上基于以前的值。要解决这个问题，您需要首先计算赢家，然后将其设置为状态

function App() {
  const weapons = ["paper","scissors","rock"];


  const [choice, setChoice] = useState({
    playerOne: "",
    playerTwo: "",
    winner: ""
  })




  const chooseWeapon=(weapon)=>{
    const choiceP1 = weapon;
    const choiceP2 = weapons[Math.floor(Math.random() * 3)];
    const winner = getWinner(choiceP1, choiceP2)
    setChoice({
      playerOne: choiceP1,
      playerTwo: choiceP2,
      winner,
    })
  }


  const getWinner = (player1,player2)=>{
    if(player1==="paper"){
      if(player2==="scissors"){
       return("player two won")
      } else if(player2==="rock"){
       return("player one won!!!!!")
      }
    }
  }

  return (
    <div className="App">
     <h1>Rock scissors lizard</h1>
  <h2>player one:{choice.playerOne}</h2>
  <h2>player two:{choice.playerTwo}</h2>
  <h1>{choice.winner}</h1>

     <button onClick={()=>chooseWeapon("paper")}>paper</button>
     <button onClick={()=>chooseWeapon("scissors")}>scissors</button>
     <button onClick={()=>chooseWeapon("rock")}>rock</button>
    </div>
  );
}

export default App;

函数应用程序（）{
常量武器=[“布”、“剪刀”、“石头”]；
const[choice，setChoice]=useState({
游戏向导：“，
playerTwo:“，
获胜者：“
})
const CHOOSEEAPON=（武器）=>{
const choiceP1=武器；
const choiceP2=武器[Math.floor（Math.random（）*3）]；
const winner=getWinner（choiceP1，choiceP2）
setChoice({
主持人：choiceP1，
播放者二：选择2，
赢家
})
}
const getWinner=（player1，player2）=>{
如果（播放器1==“纸张”）{
如果（玩家2==“剪刀”）{
返回（“玩家二赢”）
}否则如果（玩家2==“摇滚乐”）{
返回（“玩家一赢了！！！”）
}
}
}
返回(
剪刀蜥蜴
玩家一：{choice.playeron}
玩家二：{choice.playerTwo}
{choice.winner}
选择EAPON（“纸张”）}>纸张
选择EAPON（“剪刀”）}>剪刀
选择EAPON（“岩石”）}>岩石
);
}
导出默认应用程序；

在其他答案之上，谁的playerOne冠军没有选择纸张？

function App() {
  const weapons = ["paper","scissors","rock"];


  const [choice, setChoice] = useState({
    playerOne: "",
    playerTwo: "",
    winner: ""
  })




  const chooseWeapon=(weapon)=>{
    const choiceP1 = weapon;
    const choiceP2 = weapons[Math.floor(Math.random() * 3)];
    const winner = getWinner(choiceP1, choiceP2)
    setChoice({
      playerOne: choiceP1,
      playerTwo: choiceP2,
      winner,
    })
  }


  const getWinner = (player1,player2)=>{
    if(player1==="paper"){
      if(player2==="scissors"){
       return("player two won")
      } else if(player2==="rock"){
       return("player one won!!!!!")
      }
    }
  }

  return (
    <div className="App">
     <h1>Rock scissors lizard</h1>
  <h2>player one:{choice.playerOne}</h2>
  <h2>player two:{choice.playerTwo}</h2>
  <h1>{choice.winner}</h1>

     <button onClick={()=>chooseWeapon("paper")}>paper</button>
     <button onClick={()=>chooseWeapon("scissors")}>scissors</button>
     <button onClick={()=>chooseWeapon("rock")}>rock</button>
    </div>
  );
}

export default App;