[英]State in React not changing with setState method
我試圖在我的一個函數中使用setState
方法更新我的狀態,但狀態並沒有以某種方式改變。 我還在該函數中使用if
語句來告訴 setState 何時實際更改狀態。 當if
語句為true
但我的狀態仍然沒有改變時,我會在console.log
返回正確的消息。 什么可能導致錯誤?
我的功能和狀態:
constructor(props) {
super(props);
this.state = {
isregistered: false
}
}
handleValidate = (validate) => {
const state1 = this.state
console.log('state1', state1)
const validate1 = validate
console.log('l]plik validate', validate1)
if ( validate.length != 0){
this.setState({
isregistered: true
})
console.log('onregatud', this.state.isregistered)
}
else{
console.log('mitteregatud', this.state.isregistered)
}
}
這不是錯誤,setState 是異步的。 如果要在 setState 之后立即檢查狀態,則需要傳遞回調:
this.setState({myState : newState}, () => console.log(this.state.myState))
setState()
操作是異步的,並且您的console.log()
將在setState()
改變isregistered
的值之前執行,您將其從false
設置為true
,因此您無法看到結果。
我們可以通過兩種方式解決這個問題:
通過將回調函數傳遞給setState()
const handleValidate = (validate) => { const state1 = this.state const validate1 = validate if ( validate.length != 0){ this.setState( { isregistered: true }, () => console.log('callback fired', this.state)); } else { console.log('mitteregatud', this.state.isregistered); } }
通過使用async-await
async function handleValidate(validate) { const state1 = this.state const validate1 = validate if ( validate.length != 0){ await this.setState({ isregistered: true}) // More code here based on state outside callback console.log('onregatud', this.state.isregistered) } else { console.log('mitteregatud', this.state.isregistered) } }
使用async-await
在setState()
中使用回調更干凈
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.