由于react中把setState設(shè)置為異步操作函數(shù),這有時候會給我們帶來以一些問題,下面介紹一下怎么解決這個問題。
1. 在setState完成的回調(diào)里執(zhí)行需要的操作
setState函數(shù)的第二個參數(shù)允許傳入回調(diào)函數(shù),在狀態(tài)更新完畢后進(jìn)行調(diào)用,譬如:
this.setState({
? ? ? load: !this.state.load,
? ? ? count: this.state.count + 1
? ? }, () => {
? ? ? ? ? console.log(this.state.count);
? ? ? ? ? console.log('加載完成')
? ? });
2. 傳入狀態(tài)計算函數(shù)
除了使用回調(diào)韓式的方式監(jiān)聽狀態(tài)更新結(jié)果之外,react還允許我們傳入某個狀態(tài)計算函數(shù)而不是對象作為第一個參數(shù)。狀態(tài)計算函數(shù)能夠為我們提供可依賴的組件的state與props值,即會自動的將我們的狀態(tài)更新操作添加到隊列中并等待前面的更新完畢后傳入更新的狀態(tài)值:
this.setState(function(prevState, props){
? ? ? ? ? ?return {需要改變的state的名稱: 改變之后的state的值}
});