Tengo una serie de elementos de datos en los que estoy usando ganchos.
const [a, setA] = useState(true); const [b, setB] = useState(false); const [c, setC] = useState(false); const [d, setD] = useState(false); he usado un mapa para recorrer estos cuatro y cambiarlos con un clic usando una función changeOnClick . La función básicamente invierte el valor actual y establece el valor de todos los demás useStates en false . la función se parece a ( approach A ):
const changeOnClick = (x) => { switch (x) { case "a": setA(!a); setB(false); setC(false); setD(false); break; case "b": setB(!b); setA(false); setC(false); setD(false); break; . . default: break; } } He intentado usar estos 4 valores como un objeto useState ( approach B ), es decir
const [all, setAll] = useState({ a: true, b: false, c: false, d: false }); pero no puedo encontrar una forma de usar la función changeOnClick . Obviamente funciona con el approach A , pero quiero aprender una nueva forma de usar/hacer que el código se vea sucinto. Realmente apreciaría la ayuda.
Una de las formas de actualizar el objeto usando useState() es recuperar el prevState (estado anterior), spread (... prevState) y cambiar la propiedad que desee en la función setter, como
setAll((prevState) => ({ ...prevState, a : !prevState.a, // or false }));Un uso un poco más detallado basado en su código
const [all, setAll] = useState({ a: true, b: false, c: false, d: false }); const changeOnClick = (x) => { switch (x) { case "a": setAll((prevState) => ({ ...prevState, a : !prevState.a, // or false })); break; case "b": setAll((prevState) => ({ ...prevState, b : !prevState.b, // or false as you wiss })); break; ... })Si solo se permite que uno de esos estados sea verdadero, entonces tal vez use un solo estado y registre qué función está activa. por ejemplo, setState('a') o setState('b').
Creo que lo que quieres es usar una función curry. Lo siento si hay un error de sintaxis al escribir esto en vivo:
<button onClick={updateState('a')}>AAA</button> <button onClick={updateState('b')}>BBB</button> <button onClick={updateState('c')}>CCC</button> <button onClick={updateState('d')}>DDD</button> const updateState = (whichState) => (event) => { console.log('whichState', whichState) console.log('event', event) // your code here... }Una forma que puedo sugerir es crear un objeto ficticio en el propio controlador.
const clonedAll = { a: false, b: false, c: false, d: false, }; Después de eso, en el controlador mientras pasa el valor x , que es la clave en sí. Modifique setState desestructurando el objeto y agregando el valor verdadero a la clave misma.
setAll({ ...clonedAll, [x]: true, }); También asigne un valor predeterminado a x para que el valor predeterminado sea verdadero.