我很抱歉提出這個問題。我已經讀了很多關于如何重新渲染狀態的帖子，但我還是搞不清楚。我太笨了:( 我可以用useRef把事情做好，但我想學習如何用useEffect和useCallback來更新狀態。 我的資料庫獲取需要第二次點擊才能啟動，因為setState是異步的。我的useEffect/useCallback都沒有更新狀態 :( useEffect正在啟動，我得到了控制臺日志。
export function Form（） {
const[inputKey, setInputKey] = useState(""/span>)。
const inputKeyRef = useRef() 。
const [keyValid, setKeyValid] = useState(false)。
useEffect(() => {
console.log("keyValid:"/span>, keyValid)
}, [keyValid])
const [keyAuthentic, setKeyAuthentic] = useState(false)。
useEffect(() => {
console.log("keyAuthentic:"/span>, keyAuthentic)
}, [keyAuthentic])
const updateKeyValid = useCallback(
() => setKeyValid(true) 。
[keyValid, setKeyValid]。
)
const submit = e => {
e.preventDefault（）。
if ( !inputKeyRef.current.value.length < 12|! inputKeyRef.current.value.length < 20 ) {
setKeyValid(true) // not updating state
updateKeyValid(); //不更新狀態。
}
if ( keyValid === true ) { // state not true if keyValid(true)
db.collection("users").doc（inputKey）。 get().then((doc) =>/span> {
if (doc.exist) {
setKeyAuthentic(true)
console.log（doc.data（））。
}
});
}
};
return (
<div className="form__submit"/span>>
< 按鈕 型別="提交" onClick={submit}> Submit</Button>
</Div>
)
}
export default Form
uj5u.com熱心網友回復：
正如你所注意到的，setKeyValid是異步的，所以你將無法訪問新的值，直到下次渲染。
你的效果并沒有呼叫任何 setState 函式，所以我不確定你為什么會期望狀態在這些函式中被更新。
此外，狀態不應該是確定性的。如果你可以根據其他的狀態來決定一個值在任何渲染上應該是什么，那么你就根本不需要使用狀態。比如：
export function Form（） {
const [keyAuthentic, setKeyAuthentic] = useState(false)。
const [inputKey, setInputKey] = useState(""/span>)。
const submit = e => {
e.preventDefault（）。
const valid = !inputKey.length < 12 || !inputKey.length < 20;
if (! valid) return;
db.collection("users").doc（inputKey）。 get().then((doc) =>/span> {
if (doc.exists) {
setKeyAuthentic(true)
console.log（doc.data()
}
});
};
return (
<div className="form__submit">/span>
< 按鈕 型別="提交" onClick={submit}> Submit</Button>
</Div>
)
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/314470.html
標籤：