我有一個包含文本的文本欄位和一個將處理文本的按鈕。如果文本欄位為空，則 Button 不應可點擊。因此我寫了這段代碼：
const [text, setText] = useState("");
const [active, setActive] = useState(false)
function HandleActiveButton(value: string = '') {
setText(value)
if (text.length > 0) {
setActive(true)
console.log(text)
} else {
setActive(false)
console.log(text)
}
}
我的文本欄位和我的按鈕：
<TextField
id="outlined-basic"
label="Enter your text to begin"
variant="outlined"
fullWidth
multiline
rows={4}
value={text}
onChange={(e) => HandleActiveButton(e.target.value)}
/>
<LoadingButton variant="contained" disabled={!active} loading={loading} loadingPosition="end" onClick={SendRequest}>Go</LoadingButton>
它有點作業，但問題是變數沒有及時更新。如果我寫“ab”，控制臺回傳“a”，如果我寫“xyz”，控制臺回傳“xy”，等等。這意味著按鈕的激活和停用作業不正常。（例如，在我粘貼一些東西之后，我必須在按鈕變得可點擊之前輸入一個額外的字符）。為什么會這樣？我在檢查文本長度之前更新文本變數。
uj5u.com熱心網友回復：
您可以將條件從 更改text.length > 0為value.length > 0。
該setText(value)函式是異步的，因此您下面的代碼在狀態值更新之前運行。
如果您想查看為什么它是異步的，您可以查看此鏈接
uj5u.com熱心網友回復：
兩個問題。設定狀態是一個異步函式，直到下一次渲染你才會看到更新。Active 是派生狀態，您可以簡單地替換const active=text.length>0組件主體中的 if else 。
uj5u.com熱心網友回復：
您必須使用useEffect鉤子來檢查 state 的最后一個值。讓我們看看發生了什么。
SetState 是一個異步操作，所以當你運行 setState 時，JavaScript 編譯器不會等待結果并立即執行下一行。可能 state 的值還沒有改變，所以你不能相信 state 的值。
解決方法是useEffect鉤子。這個鉤子得到一個函式和一個陣列。該陣列稱為依賴陣列，這意味著只要陣列項之一的值發生變化，該函式就會運行。因此，您將 的狀態放在該陣列中，并根據該值選擇下一步。
const [text, setText] = useState("");
const [active, setActive] = useState(false)
function HandleActiveButton(value: string = '') {
setText(value)
}
useEffect(() => {
if (text.length > 0) {
setActive(true)
console.log(text)
} else {
setActive(false)
console.log(text)
}
}, [text]);
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/372514.html