首頁猿問 react...

react componentDidMount 數(shù)據(jù)請求兩次

JavaScript

縹緲止盈 2019-08-05 23:22:44

我在componentDidMount請求數(shù)據(jù)，然后在瀏覽器里看到我的數(shù)據(jù)請求了兩次，在網(wǎng)上也找到一些答案，但是都沒有解決問題。這是找到的一個回答：react-router3.xhashHistoryrender兩次的bug,及解決方案然后在控制臺打印出來this.props.router.location.action發(fā)現(xiàn)兩次都是POP并沒有像上面鏈接說的那樣一個是PUSH一個是POP，請問有人遇到這個問題么？是怎么解決的？數(shù)據(jù)請求：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 回答

江戶川亂折騰

TA貢獻(xiàn)1851條經(jīng)驗(yàn) 獲得超5個贊

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