Estoy tratando de refactorizar un componente de clase, pero en la clase uno, hay un estado con mapa e intenté cambiarlo a Funcional y usé useState, pero me sigue dando este error.
ReferenceError: Cannot access 'rules' before initializationsucede cuando intento refactorizar el estado de las reglas (que no estoy seguro de cómo), con el mapa, para usar el estado. ¿Es incluso la forma correcta de asignar el estado del mapa y cómo puedo solucionarlo?
el componente de clase:
import Rule from "./Rule"; class Game extends Component { state = { dices: Array(this.props.nOfDices).fill(1), locked: Array(this.props.nOfDices).fill(false), rotation: Array(this.props.nOfDices).fill(0), rollsRemaining: 3, isRolling: false, rules: this.props.rules.map( r => ({...r})), score: 0, bestScore: window.localStorage.getItem("bestScore") || "0" }; componentDidMount() { this.roll(); };mi componente funcional refactorizado:
const Game = ({ nOfDices }) => { const [isRolling, setisRolling] = useState(false); const [score, setScore] = useState(0); const [rollsRemaining, setRollsRemaining] = useState(3); const [dices, setDices] = useState([Array(nOfDices).fill(1)]); const [rules, setRules] = useState(rules.map(r => ({ ...r }))); const [bestScore, setBestScore] = useState(window.localStorage.getItem("bestScore") || "0"); const [locked, setLocked] = useState([Array(nOfDices).fill(false)]); const [rotation, setRotation] = useState([Array(nOfDices).fill(0)]); useEffect(() => { roll(); //eslint-disable-next-line }, []);Actualmente está configurando rules para un mapa de sí mismo...
const [rules, setRules] = useState(rules.map(r => ({ ...r })));¿Debería provenir de accesorios como en el original?
state = { // ... rules: this.props.rules.map( r => ({...r})), // ... } Si es así, también deberá desestructurarlo fuera de los accesorios en la declaración de parámetros. (Aquí renombrándolo para evitar la colisión con el nombre del estado Game = ({rules: _rules, nOfDices}) => ... )
Algo como...
const Game = ({ rules: _rules, nOfDices }) => { const [isRolling, setisRolling] = useState(false); const [score, setScore] = useState(0); const [rollsRemaining, setRollsRemaining] = useState(3); const [bestScore, setBestScore] = useState(window.localStorage.getItem('bestScore') || '0'); // nOfDices const [dices, setDices] = useState([Array(nOfDices).fill(1)]); const [locked, setLocked] = useState([Array(nOfDices).fill(false)]); const [rotation, setRotation] = useState([Array(nOfDices).fill(0)]); // rules const [rules, setRules] = useState(_rules.map((r) => ({ ...r }))); // update state if `nOfDices` changes in props useEffect(() => { setDices([Array(nOfDices).fill(1)]); setLocked([Array(nOfDices).fill(false)]); setRotation([Array(nOfDices).fill(0)]); }, [nOfDices]); // update state if `_rules` changes in props useEffect(() => { setRules(_rules.map((r) => ({ ...r }))); }, [_rules]); useEffect(() => { roll(); //eslint-disable-next-line }, []);