首頁(yè) 猿問(wèn) 求大佬指點(diǎn)哈！react...

求大佬指點(diǎn)哈！react componentDidMount 數(shù)據(jù)請(qǐng)求兩次

JavaScript

動(dòng)漫人物 2019-09-09 21:19:58

我在componentDidMount請(qǐng)求數(shù)據(jù)，然后在瀏覽器里看到我的數(shù)據(jù)請(qǐng)求了兩次，在網(wǎng)上也找到一些答案，但是都沒(méi)有解決問(wèn)題。這是找到的一個(gè)回答：react-router3.xhashHistoryrender兩次的bug,及解決方案然后在控制臺(tái)打印出來(lái)this.props.router.location.action發(fā)現(xiàn)兩次都是POP并沒(méi)有像上面鏈接說(shuō)的那樣一個(gè)是PUSH一個(gè)是POP，請(qǐng)問(wèn)有人遇到這個(gè)問(wèn)題么？是怎么解決的？數(shù)據(jù)請(qǐng)求：componentDidMount(){window.addEventListener('scroll',this.onScrollHandle);if(!this.state.isDraft){this.props.getRate({type:this.state.type,userId:this.state.userId});this.handlePageChange(1,3);}this.getData();console.log(this.props.router.location.action);//this.setState({provinceInfo:getProvinceInfo(this.state.provinceId)});}getData=()=>{this.props.getApp(this.state.type,this.state.userId);this.props.getSimilarApp({apptype:this.state.type});}react版本如下"react":"^15.5.4","react-dom":"^15.5.4","react-redux":"^4.4.2","react-router":"^3.0.5",

查看完整描述

2 回答

拉風(fēng)的咖菲貓

TA貢獻(xiàn)1995條經(jīng)驗(yàn) 獲得超2個(gè)贊

找到原因了，我在入口文件App.js里請(qǐng)求了一次不同用戶(hù)權(quán)限的接口，而且在渲染的時(shí)候返回兩個(gè)組件，如下：render(){const{isFetching}=this.props.userRole;const{Content,Footer}=Layout;if(isFetching){return()}else{return(...);}}我通過(guò)請(qǐng)求userRole接口的isFetching來(lái)控制渲染，但是這樣做是不正確的，因?yàn)橐婚_(kāi)始isFetching就是false，所以，一開(kāi)始就會(huì)render一次Layout，然后在componentDidMount請(qǐng)求userRole，isFetching變?yōu)閠rue，頁(yè)面卸載Layout，渲染Spin。等userRole請(qǐng)求結(jié)束，isFetching=false，繼續(xù)渲染Layout。從而導(dǎo)致在Detail詳情頁(yè)面請(qǐng)求兩次數(shù)據(jù)。修改后的代碼如下：return(...);