0
167
VistasReact.js niño que no actualiza una variable de padre a través de la función
Así que estoy aprendiendo a React.js en este momento y he estado luchando con este problema. Estoy tratando de hacer tres en raya, así que tengo este código:
import './App.css';
import { useState } from "react"
const X = 1;
const O = -1;
const EMPTY = 0;
var Square = ({idx, click}) =>
{
let [val, setVal] = useState(EMPTY);
return (
<button onClick={() => {click(setVal, idx);}}>{val}</button>
)
}
var Logger = ({state}) =>
{
return (
<button onClick={() => {console.log(state);}}>log</button>
)
}
var App = () =>
{
let [turn, setTurn] = useState(X);
let state = new Array(9).fill(EMPTY);
let squares = new Array(9);
let click = (setValFunc, idx) =>
{
setTurn(-turn);
setValFunc(turn);
state[idx] = turn;
}
for (let i = 0 ; i < 9 ; i++)
{
squares[i] = (<Square click={click} idx={i}/>);
}
return (
<>
<Logger state={state} />
<div>
{squares}
</div>
</>
)
}
export default App;
por lo tanto, los cuadrados ESTÁN cambiando cuando hago clic en ellos, pero cuando hago clic en el botón de registro para registrar la matriz de estado en la consola, la matriz de estado sigue siendo ceros.
¿que me estoy perdiendo aqui?
2 Respuestas
Responde la pregunta0
Su estado tiene que ser un state React nuevamente. De lo contrario, el estado que definió dentro de la App como una variable local solo dura hasta la próxima representación.
- Mantener el estado de tic-tac-toe dentro de un gancho
useState
let [state, setState] = useState(new Array(9).fill(EMPTY));
- Actualice el controlador de clics en consecuencia.
let click = (setValFunc, idx) => {
setTurn(-turn);
setValFunc(turn);
setState((prevState) =>
prevState.map((item, index) => (index === idx ? turn : item))
);
};
0
En React, el concepto de estado es importante.
En su caso, necesita comprender cuál es su estado y cómo puede modelarlo.
Si estás haciendo un Tic-Tac-Toe tendrás:
- el juego de mesa: una "mesa" de 3 por 3 con signos vacíos, cruzados o circulares
Esto se puede modelar mediante una matriz de 9 elementos como lo hizo.
Pero luego debe almacenar esta matriz usando useState de lo contrario, entre -re-renderizaciones, su matriz de state se recreará cada vez.
Te aconsejo que leas https://reactjs.org/docs/lifting-state-up.html y https://beta.reactjs.org/learn .