0
222
VistasReactjs: la matriz de generación rompe dinámicamente los resultados de código únicos
Estoy tratando de hacer un clon de Wordle pero más dinámico.
Tengo una versión de trabajo "normal" pero está limitada por los caracteres de una palabra y el número de intentos. Esta restricción es lo que estoy tratando de eliminar.
En mi clase principal, establecí un board de matriz [] aquí que almacena tanto la cantidad de intentos permitidos como la longitud asignada en función de la longitud del carácter de correctWord .
[[attempt1],[attempt2]...etc] representa la estructura de matrices secundarias de la board .
Sus matrices secundarias de caracteres por attempt1[char1,char2,char3,char4,char5 ...etc]
La implementación de trabajo original (que es estática):
const [board, setBoard] = useState([["","","","",""],["","","","",""]]);En cambio, estoy tratando de hacer lo siguiente (para hacerlo dinámico):
const correctWord = "RIGHT"; const [lives, setLives] = useState(2); const [board, setBoard] = useState(Array(lives).fill(Array(correctWord.length).fill("")));Cuando hago esto y juego (ingresando un carácter), modificará el carácter correcto, pero para cada matriz, en lugar del único en la selección actual
Aquí hay imágenes que muestran ambos resultados de implementación al hacer clic en caracteres:
Implemento estático: 
Implementación dinámica: 
Finalmente la lógica para seleccionar un personaje es la siguiente:
const selectKey = (event) => { if (current.letterPos >= correctWord.length) return; // dont add more than correct word const newBoard = [...board]; newBoard[current.attempt][current.letterPos] = key; setBoard(newBoard); setCurrent({ attempt: current.attempt, letterPos: current.letterPos + 1 }); // increment }; }Me dijeron que esto es incorrecto porque está haciendo una mutación de estado, pero si esto es cierto, ¿por qué funciona antes de hacerlo dinámico?
El siguiente es un codesandbox donde se puede visualizar este problema, se ha reducido a lo esencial e ingresa 1 carácter: https://codesandbox.io/s/shy-rain-8w7e3w?file=/src/App.js: 505-904
La línea en App.js 21 es donde ocurre y funciona la asignación no dinámica de trabajo.
Cuando comenta la línea 9+10 para que la matriz esté vacía y quita el comentario de la línea 14 para establecer la matriz, aquí es donde se puede ver el problema.
Además, con la depuración de la consola F12 , mostrará el estado de los elementos de la placa que también muestra este problema.
Cualquier sugerencia es bienvenida
1 Respuestas
Responde la pregunta0
Resulta que eran 2 problemas.
El primero es la asignación de tablero (que pensé que era) y, en segundo lugar, la funcionalidad selectLetter.
Me dieron esta respuesta y no tomaré crédito por ello. Lo siguiente incluía una explicación:
Array(lives).fill(Array(correctWord.length).fill(""))Cuando ejecutas eso, suceden estas cosas:
-
Array(correctWord.length).fill("")crea una matriz y la llena con cadenas vacías -
Array(lives).fill(…)crea una segunda matriz y la llena con la primera matriz vidas veces
Entonces, todos los elementos de esa segunda matriz (externa) son exactamente la misma matriz. Cambiar esa matriz en cualquier índice afectará a todos los índices porque todos son la misma matriz. Sin embargo, si soluciona el problema de que está mutando, esto ya no importaría porque el problema solo importa con la mutación.
Pero para su información, así es como podría crear matrices separadas.
Array.from({ length: lives }, () => Array.from({ length: correctWord.length }, () => "") ) Luego: línea 2 [ newBoard[current.attempt][current.letterPos] = key; ] es básicamente el problema. Aquí hay un enfoque para solucionar ese problema.
const newAttempt = [...board[current.attempt]]; newAttempt[current.letterPos] = key; const newBoard = [...board]; newBoard[current.attempt] = newAttempt; setBoard(newBoard);