0

Estoy haciendo un tic-tac-toe basico en react. Tengo cuatro componentes, tablero, cuadrilla, cruz y circulo. El problema es que cuando actualizo el estado del tablero no se llama al useEffect ni se ejecuta el render.

Tablero:

import React, { useState, useEffect} from 'react'
import "../Css/Board.css";
import "../Css/EndMessage.css"
import BoardBox from './BoardBox';

export default function Board (){
    const [boardBoxes, setBoardBoxes] = useState([0, 0, 0, 0, 0, 0, 0, 0, 0])
    const [gameHasEnded, setGameHasEnded] = useState(false)
    const [winner, setWinner] = useState(0)

    useEffect(() => {
        console.log(boardBoxes);
    },[boardBoxes]);

    let randomPlay = () => {
        function getRandomInt(min, max) {
            min = Math.ceil(min);
            max = Math.floor(max);
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        
        let play = getRandomInt(0, 8);
        while(boardBoxes[play] !== 0){
            play = getRandomInt(0, 8);
        }

        markBox(play, 2)
    }


    let checkWinner = (callback) => {
        let winner = 0;
        let boxes = boardBoxes;

        if((boxes[0] === boxes[1] && boxes[1] === boxes[2]) ||
           (boxes[0] === boxes[3] && boxes[3] === boxes[6])){
               winner = boxes[0];
        }else if ((boxes[2] === boxes[5] && boxes[5] === boxes[8]) ||
                  (boxes[6] === boxes[7] && boxes[7] === boxes[8])) {
                    winner = boxes[8];
        }else if ((boxes[0] === boxes[4] &&  boxes[4] === boxes[8]) ||
                  (boxes[2] === boxes[4] && boxes[4] === boxes[6])) {
                    winner = boxes[4];
        }else if ((boxes[3] === boxes[4] &&  boxes[4] === boxes[5]) ||
                  (boxes[1] === boxes[4] && boxes[4] === boxes[7])) {
                    winner = boxes[4];
        }else if (boardBoxes.indexOf(0) === -1) {
                winner = 3; 
        }
        if (winner !== 0) {
            setGameHasEnded(true)
            setBoardBoxes([0, 0, 0, 0, 0, 0, 0, 0, 0])
            setWinner(winner)
            setTimeout(() => {
                setGameHasEnded(false)
                setWinner(0)
            }, 1500);
        }else{
            callback();
        }
        
    }

    let markBox = (num, player) => {
        if (!gameHasEnded) {
            let boxes = boardBoxes;
            if (boxes[num] === 0) {
                boxes[num] = player;
                setBoardBoxes(boxes);
                checkWinner(() => {
                    if(!(boardBoxes.indexOf(0) === -1)){
                        if(player === 1){
                            randomPlay();
                        }
                    }
                });
            }
        }
    }

    return(
        !gameHasEnded
        ? <div className="BoardMainDiv">
            {(function() {
                let elements = []
                for(let i = 0; i < 3; i++){
                    for(let j = 0; j < 3; j++){
                        elements.push(<BoardBox 
                        key={j+ 3*i} 
                        col={i} 
                        row={j} 
                        boxes={boardBoxes}
                        marked={boardBoxes[j+ 3*i] !== 0} 
                        markedPlayer={boardBoxes[j+ 3*i]}
                        markBox={markBox}
                        />);
                    } 
                } 

                return(elements)
            })()}
        </div>
        : winner !== 3
        ? <h1 className="EndMessage">Player: {winner} has won the game</h1>
        : <h1 className="EndMessage">It's a Tie</h1>
    );
}

Cuadrilla:

import React from 'react';
import "../Css/BoardBox.css";
import Cross from "./Cross";
import Circle from "./Circle";


export default function BoardBox(props){

        return(
            <div onClick={() => {
                props.markBox(props.row + 3*props.col, 1);
                console.log(props.boxes)
                }} className="BoardBox">
            {props.marked === true ? (props.markedPlayer === 1 ? <Cross/> : (props.markedPlayer === 2 ?  <Circle/> : "")): ""}

            </div>
        );
}

1 respuesta 1

1

Finalmente encontré el error. En markbox defino una variable boxes y la igualo al estado boardBoxes y luego de modificar un valor actualizo el estado setBoardBoxes(boxes). Y el problema está en que React reconoce boxes como el mismo array pero con un valor cambiado, entonces no actualiza el componente. Para solucionarlo solo cambio la linea por setBoardBoxes([...boxes]);. Utilizando el spread operator creo un nuevo array que incluye los valores en boxes y React actualiza el componente.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.