ANTECEDENTES
Tengo un objeto al que hago referencia para alternar cambios de estado en un evento onClick.
const map = { active: { name: "sliceA", toggle: (map) => map.inactive }, inactive: { name: "sliceB", toggle: (map) => map.active } } useState del componente contiene map.acive o map.inactive segmento de objeto a través de una función de transición.
const [slice, setSlice] = useState(map.active); const transition = (getMethod) => { const getNewSlice = getMethod(slice); const result = getNewSlice(map); setSlice(result); };Esto funciona como espero hasta que intente varios cambios de estado en un solo evento onClick.
const handleClick = async () => { try { transition(slice => slice.toggle); await stall(); transition(slice => slice.toggle); } catch (err) {} };TEMA
Ver enlace - codesandbox1
Si hace clic en el botón X1, la segunda transición () en handleClick () no activará el cambio de estado.
Si hace clic en el botón X2, la segunda transición () en handleClick () activará el cambio de estado.
SOLICITUD
¿Por qué sucede esto y hay alguna forma de solucionarlo? Hice otra forma más manual de establecer el estado y funciona como se esperaba: codesandbox2
El motivo es que ambas llamadas de transition en una llamada de handleClick se refieren al estado del slice en el que se definió la transition de la llamada de representación. En otras palabras, setState no actualiza el slice sobre el que se cierra la transtion .
Para que siempre actúe en el estado actual , use un setter de devolución de llamada. currentSlice también se actualizará entre las llamadas de procesamiento:
const transition = (getMethod) => { setSlice((currentSlice) => { const getNewSlice = getMethod(currentSlice); return getNewSlice(map); }); };