Tengo la siguiente variable de estado, la cual es un arreglo bidimensional de 3x3
const [posiciones, setPosiciones] = useState([[null, null, null], [null, null, null], [null, null, null]]);
En la variable de estado historial se va a almacenar la variable posiciones, por lo tanto la variable historial sería un arreglo que tiene un conjunto de arreglos bidimiensionales.
const [historial, setHistorial] = useState([]);
Al momento de que el usuario da clic en un botón, se ejecuta la siguiente función, en la cual se cambia el valor de la variable posiciones de acuerdo al lugar en donde dió clic el usuario, y a su vez, se cambia el valor de la variable historial, en la cual se almacena el arreglo bidimensional.
const cambiarSimbolo = posicion =>
{
let posicionesAux = posiciones;
if(posicion <= 3)
posicionesAux[0][posicion - 1] = simbolo;
else if(posicion <= 6)
posicionesAux[1][posicion - 4] = simbolo;
else
posicionesAux[2][posicion - 7] = simbolo;
setPosiciones(posicionesAux);
setHistorial([...historial, posicionesAux]);
setIntento(intento + 1);
setSimbolo(simbolo === "X" ? "O" : "X");
}
La siguiente función es la encargada de mostrar lo que contiene la variable historial en determinada posición, el error esta en la variable historial, ya que en cada posición tiene el ultimo valor del arreglo bidimensional, ósea de la variable posición.
const verHistorial = indice =>
{
console.log(historial[indice - 1]);
}
Por ejemplo, si se cambia el valor de la variable historial por primera vez y luego se intenta ver el contenido del arreglo en la posicion 0, este es el resultado.
Pero al momento de volver a agregar un elemento a la variable historial, se sustituye el valor en la posición 0 por el nuevo valor de posición, por lo tanto, en cada posicion de la variable historial se repite el valor de la variable posición.
Entonces, ¿Qué tendría que hacer para evitar que en cada posición de la variable historial no se repita el mismo arreglo bidimensional?