Estoy escribiendo una función que establece simultáneamente el estado Y lo asigna a un objeto. Estoy hablando específicamente de setValue y after: value
const handleAddToHistory = (e) => { e.preventDefault(); setValue((parseFloat(Object.values(data))*fromTo).toFixed(2)) setHistory([ ... history , { date: new Date().toISOString().slice(0, 10), before: fromTo, after: value, }]) }Sin embargo, en la primera ejecución, el "valor" está vacío. Me obliga a hacer clic en el botón nuevamente, y solo entonces muestra todos los datos correctamente.
¿Cómo puedo configurar el estado e invocarlo inmediatamente? ¿Debo hacer algún tipo de intervalo de tiempo en setHistory para esperar hasta que setValue esté realmente configurado?
Cuando establece el estado en React, es asíncrono, ya que activa una nueva representación. Por lo tanto, usa useEffect para manejar cualquier cosa que deba suceder cuando cambia el value :
useEffect(() => { setHistory([ ... history , { date: new Date().toISOString().slice(0, 10), before: fromTo, after: value, }]) }, [value])¿Alguna razón para no hacer esto?
const handleAddToHistory = (e) => { e.preventDefault(); const valueToSave = (parseFloat(Object.values(data))*fromTo).toFixed(2); setValue(valueToSave) setHistory([ ... history , { date: new Date().toISOString().slice(0, 10), before: fromTo, after: valueToSave, }]) } Si eso no funciona por alguna razón, puede usar un gancho useEffect :
const handleAddToHistory = (e) => { e.preventDefault(); setValue(parseFloat(Object.values(data))*fromTo).toFixed(2)) } useEffect(() => { setHistory([ ... history , { date: new Date().toISOString().slice(0, 10), before: fromTo, after: value, }]); }, [value]);