由于react中把setState設(shè)置為異步操作函數(shù)屈溉,這有時(shí)候會(huì)給我們帶來以一些問題,下面介紹一下怎么解決這個(gè)問題抬探。
1. 在setState完成的回調(diào)里執(zhí)行需要的操作
setState函數(shù)的第二個(gè)參數(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)計(jì)算函數(shù)
除了使用回調(diào)韓式的方式監(jiān)聽狀態(tài)更新結(jié)果之外驶睦,react還允許我們傳入某個(gè)狀態(tài)計(jì)算函數(shù)而不是對(duì)象作為第一個(gè)參數(shù)。狀態(tài)計(jì)算函數(shù)能夠?yàn)槲覀兲峁┛梢蕾嚨慕M件的state與props值匿醒,即會(huì)自動(dòng)的將我們的狀態(tài)更新操作添加到隊(duì)列中并等待前面的更新完畢后傳入更新的狀態(tài)值:
this.setState(function(prevState, props){
? ? ? ? ? ?return {需要改變的state的名稱: 改變之后的state的值}
});