Tengo un ejemplo muy básico y no puedo entender qué estoy haciendo mal. Tengo un contador muy simple y quiero copiar su estado inicial a otra variable sin la reactividad, pero no puedo hacerlo.
import { useState } from "react"; import "./styles.css"; export default function App() { const [number, setNumber] = useState({ val: 10 }); const numberAssign = Object.assign({}, number); const numberJSON = { ...number }; const numberSpread = JSON.parse(JSON.stringify(number)); const clicked = () => { setNumber({ val: number.val + 1 }); }; return ( <div className="App"> <button onClick={clicked}>Inc</button> <p>{number.val}</p> <p>{numberAssign.val}</p> <p>{numberJSON.val}</p> <p>{numberSpread.val}</p> </div> ); } Todas las variables se incrementan al hacer clic en el botón, pero solo quiero que se incremente la variable number .
Las variables no se están comportando de manera anormal. Está configurando las variables al valor de la variable de estado que, en este caso, se actualiza constantemente. Intente tener la variable val declarada fuera del estado
`const val = 10; const [number, setNumber] = useState({ val });`luego use val en lugar del estado numérico.
No sé si eso te ayudará mucho, pero puedes usar otro enlace useState donde almacenarás el valor anterior del estado actual. Código:
import { useState } from "react"; export default function App() { const [currNum, setCurrNum] = useState(10); const [prevNum, setPrevNum] = useState(0); const clicked = () => { setPrevNum(prevNum); setCurrNum(prevNum+=1); }; return ( <div className="App"> <button onClick={clicked}>Inc</button> <p>{currNum}</p> <p>{prevNum}</p> </div> ); }En cada acción setState(useState), el componente volverá a representar todo lo que contiene. Solo mantendrá los valores que se crearon usando ganchos de reacción como useState (eso es lo que quiere hacer useState)
Coloque un console.log('rerender') justo antes de todos los estados de uso, verá que se activará en su misma acción, lo que significa que en los componentes funcionales no mantendrá ninguna variable o valor a menos que se cree usando ganchos de reacción, incluso si es variable constante
En su caso, estas variables constantes se crean nuevamente y se les asigna un nuevo objeto numérico, por eso se actualiza cada vez. pero puede usarlo en diferentes estados de uso, o puede definirlo dentro de un useEffect que activará solo llamadas en momentos específicos import { useState } from "react";
export default function App() { console.log('rerender') const [number, setNumber] = useState({ val: 10 }); const [numberAssign, setN] = useState(Object.assign({}, number)); const [numberJSON, setJSON] = useState({ ...number }); const [numberSpread,setSpread] = useState(JSON.parse(JSON.stringify(number))); const clicked = () => { setNumber({ val: number.val + 1 }); }; return ( <div className="App"> <button onClick={clicked}>Inc</button> <p>{number.val}</p> <p>{numberAssign.val}</p> <p>{numberJSON.val}</p> <p>{numberSpread.val}</p> </div> ); }