No estoy seguro de lo que estoy haciendo mal aquí, hacer clic en un botón muestra el resultado del botón anterior que se está presionando, no el botón actual ... La consola muestra resultados completamente diferentes a los que veo en la página cuando agregue console.logs a la función handleClick.
import { useState } from "react"; import "./App.css"; import { playRound, computerPlay } from "./utils/rps"; function App() { const [playerSelection, setPlayerSelection] = useState(""); const [CPUselect, setCPUselect] = useState(""); const [results, setResult] = useState(""); const handleClick = (e) => { setPlayerSelection(e.target.value); setCPUselect(computerPlay()); setResult(playRound(playerSelection, CPUselect)); }; return ( <> <div> <h1>RPS!</h1> <div> <p>You Chose {playerSelection}</p> <p>Computer Chose {CPUselect}</p> <p>{results}</p> <p> <button value={"Rock"} onClick={handleClick}> Rock </button> <button value={"Paper"} onClick={handleClick}> Paper </button> <button value={"Scissors"} onClick={handleClick}> Scissors </button> </p> </div> </div> </> ); } export default App;y el archivo JS con funciones:
export const computerPlay = () => { const num = Math.floor(Math.random() * 3); if (num === 0) { return "Rock"; } else if (num === 1) { return "Scissors"; } else if (num === 2) { return "Paper"; } }; export const playRound = (playerSelection, computerSelection) => { if (playerSelection === computerSelection) { return "Draw!"; } if ( (playerSelection === "Rock" && computerSelection === "Scissors") || (playerSelection === "Scissors" && computerSelection === "Paper") || (playerSelection === "Paper" && computerSelection === "Rock") ) { return "You win! " + playerSelection + " beats " + computerSelection; } else { return "You Lose! " + computerSelection + " beats " + playerSelection; } };Los cambios de estado de los lotes reaccionan, no ocurren de una manera sincrónica predecible. Debe esperar a que React cambie el estado antes de calcular el puntaje y usar la función setResult.
Aquí es donde el gancho useEffect resulta útil. El primer argumento es una devolución de llamada y el segundo es una lista de dependencias. Básicamente, cada vez que cambia un elemento de la lista (la selección de jugador y el valor de selección de CPU en este caso), React llamará a la función que se pasó al gancho useEffect.
const [playerSelection, setPlayerSelection] = useState(""); const [CPUselect, setCPUselect] = useState(""); const [results, setResult] = useState(""); const handleClick = (e) => { setPlayerSelection(e.target.value); setCPUselect(computerPlay()); }; useEffect(() => { setResult(playRound(playerSelection, CPUselect)); }, [playerSelection, CPUselect]);