保存時，我想繼續執行一個功能，具體取決于是否選中了復選框。如果復選框已被選中，該函式應繼續保存，否則應顯示需要選中復選框的警告。
但是，我的功能不起作用。我注意到，如果我 console.log 來自狀態的復選框布林值，則在我呼叫該函式時狀態沒有更新。
const [checkBoxTick, setCheckBoxTick] = useState(false);
const [checkBoxError, setCheckBoxError] = useState(false);
const onSave = useCallback(async () => {
console.log(checkBoxTick);
if (checkBoxTick) {
*** go ahead and save ****
} else {
setCheckBoxError(true);
}
}, []);
<Checkbox
label="text here"
helperText="This field is required"
error={checkBoxError}
onChange={() => setCheckBoxTick(!checkBoxTick)}
/>
<Button color="primary" size="small" onClick={onSave}>
Save
</Button>
當我檢查復選框（將 checkBoxTick 的狀態更改為 true）并點擊按鈕時，該函式被呼叫，但 checkBoxTick 的狀態為 false，盡管它應該為 true。
我知道這是一個常見的狀態問題，整個互聯網都建議使用 useEffect()，但我無法理解如何在我的情況下使用它。
任何幫助深表感謝 ：）
先感謝您。
uj5u.com熱心網友回復：
UseCallback 正在記憶checkBoxTick. 您需要將變數作為依賴項傳遞給 useCallback 以便它得到更新，如下所示：
const onSave = useCallback(async () => {
console.log(checkBoxTick);
if (checkBoxTick) {
*** go ahead and save ****
} else {
setCheckBoxError(true);
}
}, [checkBoxTick]);
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/463503.html
標籤：javascript 反应 打字稿 使用效果 使用状态