如果我輸入一個比當前 toAmount 大的 fromAmount，那么 toAmount 值預計將變為 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]);
}
當前from-amount為1，to-amount為5，如果我把from-amount改為10，控制臺日志為：
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: ''
}
令我困惑的是，fromAmount 已經設定為 10，為什么在呼叫 handleToAmountInput() 時，fromAmount 的值仍然是 1。
一開始還以為是setState是async的緣故，于是用setTimeOut讓handleToAmountInput()運行了大概5s后進行測驗，結果還是一樣。
有誰知道原因以及如何解決？
uj5u.com熱心網友回復：
您需要添加setItemFieldHandler到您的useCallbackdeps 中，否則他們將只保留舊的參考。另外，setState是一個異步操作，如果你想在使用它的時候訪問之前的值，傳遞一個函式給你的setState呼叫，該函式將接收之前的狀態值。
const setItemFieldHandler = (key, value) => {
setItemObj((cur) => {
return {...cur, [key]: value}
});
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/369618.html
標籤：javascript 反应