初學者在使用setState時會遇到的一些問題[React.js]

最近在學react所以想說來接github API來練練功,因為想把抓到的資料都存到state裡面,我想說拆成兩個component並且都有用state,在這個時候發現當我把其中一個元件的state丟給另外一個元件的state之後,我用console.log輸出this.state,卻完全沒反應,可是程式碼都是正確的。

為什麼setState沒反應?

this.setState({userName: this.props.name})
console.log(this.state.userName);
這段程式碼看起來很正確也沒什麼問題,可是當我在跑的時候就是沒輸出任何值出來。

異步執行

setState是屬於異步執行,他並不會等到完全執行完再往下執行下一行程式碼,所以我在這邊寫的console.log所顯示出來的可能是setState還未重新render的結果。

解決方式

其實setState可以帶入第二個參數值,我們在第二個參數值裡面寫一個function這樣它就會確保是在state完全更新完再執行你要執行的function。

this.setState({userName: this.props.name},function(){
     console.log(this.state.userName);
})

不必要的重繪

在React的機制裡面,只要state被改變就會把畫面重繪,如果你每個元件都用到state並且常常改變它,可能會發生一些無法預期的錯誤,所以很多人會建議盡量使用stateless component來寫你的元件,並不是每個元件都一定要用到state,我在遇到這次的問題之後,也把其中一個元件的state拿掉了,改弄別種寫法來解決。

參考文章