Estoy creando un juego simple de Tic Tac Toe en React.
El objetivo : cada botón tiene su propio estado. Después de hacer clic en el botón, debería cambiar el estado de ' ' a una 'X' y luego cambiar el estado global para que el jugador diga 'Jugador 2'.
El problema : solo se vuelve a generar la llamada a setPlayer() pero no la llamada a setValue(). Pero si me deshago de setPlayer() y solo llamo a setValue(), entonces funciona según lo previsto. Necesito que setStates funcione y vuelva a renderizar para que se muestre una X cuando cambie el nombre del jugador.
Aquí hay un enlace a una versión de sandbox en vivo:
https://codesandbox.io/s/ticktacktoe-ozxjm?file=/src/App.js
import './App.css'; import { useState } from 'react'; function App() { const player1 = "Player 1" const player2 = "Player 2" const [player, setPlayer] = useState(player1) const WhosTurnMessage =()=>( <div className='message'> {player}, It's Your Turn </div> ) const Buttons =()=>{ const [value, setValue] = useState() const checkAndSet =()=>{ if (player === player1){ setValue('X') setPlayer(player2) } else { setValue('O') setPlayer(player1) } } return ( <div className='grid-item'> <button className='btn' onClick={()=>checkAndSet()} > {value} </button> </div> ) } const MapButtons =()=>( [1,2,3,4,5,6,7,8,9].map( i => <Buttons key={`button ${i}`}/>) ) return ( <div className="App"> <header className="App-header"> <h1> Tick Tack Toe </h1> </header> <WhosTurnMessage /> <main> <div className='grid-container'> <MapButtons /> </div> </main> </div> ); } export default App;El problema con su código es que está creando nuevos tipos de componentes en medio de la representación de la App . Esto no funcionará. Por ejemplo, cada vez que se procesa la App , se crea una nueva función Buttons . Puede tener el mismo texto que la función original, pero todo lo que reacciona sabe es que es una función diferente de la última vez. Entonces, dado que es un tipo diferente de componente, react desmonta el anterior y monta el nuevo, eliminando todo el estado.
Cualquier componente que desee definir debe moverse fuera de la App , de modo que solo lo cree una vez, no en cada renderizado. Esto definitivamente incluye Buttons , ya que tiene estado, y aunque podría mover WhosTurnMessage y MapButtons , no No creo que esos merezcan ser componentes. Simplemente haría que la App calculara esos bits de jsx.
Entonces, recomiendo esto, si aún desea asignar partes del componente a variables locales:
function App() { const player1 = "Player 1" const player2 = "Player 2" const [player, setPlayer] = useState(player1) const whosTurnMessage = ( <div className='message'> {player}, It's Your Turn </div> ); const mapButtons = [1,2,3,4,5,6,7,8,9].map( i => <Buttons key={`button ${i}`}/>) return ( <div className="App"> <header className="App-header"> <h1> Tick Tack Toe </h1> </header> {whosTurnMessage} <main> <div className='grid-container'> {mapButtons} </div> </main> </div> ) } const Buttons = () => { const [value, setValue] = useState(); // ... same code you already have }O personalmente, haría el jsx en línea, sin asignarlo a variables:
function App() { const player1 = "Player 1" const player2 = "Player 2" const [player, setPlayer] = useState(player1) return ( <div className="App"> <header className="App-header"> <h1> Tick Tack Toe </h1> </header> <div className='message'> {player}, It's Your Turn </div> <main> <div className='grid-container'> {[1,2,3,4,5,6,7,8,9].map(i => <Buttons key={`button ${i}`}/>)} </div> </main> </div> ) }