Si ingreso un fromAmount que es mayor que el toAmount actual, entonces se espera que el valor toAmount se convierta en fromAmount + $1.
const initialObj = { fromAmount: '', toAmount: '', comment: '' }; const [itemObj, setItemObj] = useState(initialObj); const setItemFieldHandler = (key, value) => { console.log("set", key, value); console.log("old state: ", itemObj); const newState = { ...itemObj, [key]: value }; console.log("new state: ", newState); setItemObj(newState); }; const handleFromAmountInput = useCallback((value) => { setItemFieldHandler('fromAmount', value); //check if from amount > to amount, // then set toAmount = fromAmount + 1 if(areBothAmountsValid()) { const newToAmount = value + 1; handleToAmountInput(newToAmount); } }, [itemObj]); const handleToAmountInput = useCallback((value => { setItemFieldHandler('toAmount', value); }, [itemObj]); }El importe desde actual es 1, el importe hasta es 5. Si cambio el importe desde a 10, el registro de la consola es:
set fromAmount 10 old state: { fromAmount: 1, toAmount: 5, comment: '' } new state: { fromAmount: 10, toAmount: 5, comment: '' } set toAmount 11 old state: { fromAmount: 1, toAmount: 5, comment: '' } new state: { fromAmount: 1, toAmount: 11, comment: '' }Lo que me confunde es que, fromAmount ya está configurado como 10, por qué al llamar a handleToAmountInput(), el valor de fromAmount sigue siendo 1.
Al principio, pensé que se debía a que setState es asíncrono, así que usé setTimeOut para hacer que handleToAmountInput() se ejecutara después de 5 segundos para probar, pero el problema sigue siendo el mismo.
Alguien sabe el motivo y como solucionarlo?
Debe agregar setItemFieldHandler a sus useCallback useCallback, de lo contrario, solo mantendrán la referencia anterior. Además, setState es una operación asíncrona, si desea acceder al valor anterior cuando trabaja con él, pase una función a su llamada setState , la función recibirá el valor de estado anterior.
const setItemFieldHandler = (key, value) => { setItemObj((cur) => { return {...cur, [key]: value} }); };