0
後這裏如何再次渲染組件是我route.js網址變更
var Routes = (
<Router history={hashHistory}>
<Route path="/" component={Authenticate}/>
<Route path="forgotpassword" component={ForgotPassword}/>
<Route path="resetpassword/:tokenId" component={ResetPassword}/>
<Route path="login" component={Login}/>
<Route path="loginaccount/:tokenId" component={DirectLogin}/>
<Route path="dashboard" component={UserBase}>
<IndexRoute component={Dashboard} />
<Route path="changepassword" component={ChangePassword}/>
</Route>
<Route path='*' component={NotFound} />
</Router>
);
所以，當我叫http://localhost:8080/#/dashboard的用戶羣和儀表板加載調用Ajax請求加載數據。在此之後，我將url更改爲http://localhost/#dashboard/changepassword它加載ChangePassword組件的一切都很好。
但是，當我返回到儀表板時，我的數據丟失了，它顯示空白的UI設計。
這裏是儀表板組件
var React = require('react');
import Grid from "./DashboardGrid.js";
import PopupOver from '../common/PopupOver.js';
import Loader from '../common/Loader.js';
import ListBox from "../common/ListBox.js";
import Auth from "../common/Cookies.js";
import LoadFile from '../common/LoadFile.js';
import ERRORS from '../common/Errors.js';
import Const from '../constants/Constants';
import ErrorMessage from '../constants/ErrorMessage';
import LINK from '../constants/LinkConstants';
var Router = require('react-router');
class Dashboard extends React.Component{
constructor(){
console.log("called..dashboard")
super();
this.tab2Chart = 0;
this.state = {typeData:'-1', lastPeriod:'2', gridData:[], graphLoad:false, showLoader:false}
}
componentWillReceiveProps(nextProps) {
console.log(nextProps)
if (nextProps.gridData !== this.props.gridData) {
this.setState({gridData:nextProps.gridData, typeData:'-1', lastPeriod:'2',});
this.datePicker(2);
}
}
render(){
var entryData = this.state.gridData; //grid data
var placementData = this.props.placementData; //dropdown data
var tab3 = 0;
var tab4 = 0;
var tab2 = 0;
var tab0 = 0;
var tab1 = 0;
var fromdate;
var rows = entryData.map(function(eachRow) {
for (var key in eachRow){
var comment = eachRow[key];
tab3 = tab3 + comment.tab3;
tab4 = tab4 + comment.tab4;
tab2 = tab2 + comment.tab2;
}
});
if(tab3 && tab2){
tab0 = parseFloat(tab2/tab3);
}
if(tab4 && tab2){
tab1 = (tab2/tab4)*1000
}
var lastPeriod = [
{name: "Today",value:"0"},
{name: "Yesterday",value:"1"},
{name: "Last 7 Days",value:"2"},
{name: "Last 30 Days",value:"3"},
{name: "This Month",value:"4"},
{name: "Last Month",value:"5"},
{name: "Last Year",value:"6"}
]
var list = [];
placementData.forEach(function(data){
var k = {name:data.ad_title, value:data.id};
list.push(k);
});
return (
<div>
{this.state.showLoader? <Loader show='true'/> : <Loader show='false'/>}
<div className="right_col" role="main">
<div className="row tile_count">
<div className="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
<span className="count_top">Revenue</span>
<div className="count green"><i className="fa fa-dollar"/><div className='displayinline'>{numberWithCommas(tab2)}</div></div>
</div>
<div className="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
<span className="count_top">Impressions</span>
<div className="count">{numberWithCommas(tab4)}</div>
</div>
<div className="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
<span className="count_top">Total Clicks</span>
<div className="count">{numberWithCommas(tab3)}</div>
</div>
<div className="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
<span className="count_top">Net PPC</span>
<div className="count"><i className="fa fa-dollar"/><div className='displayinline'>{numberWithCommas(tab0)}</div></div>
</div>
<div className="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
<span className="count_top">Net eCPM</span>
<div className="count"><i className="fa fa-dollar"/><div className='displayinline'>{numberWithCommas(tab1)}</div></div>
</div>
</div>
<div className="item">
<div className="x_content">
<div className="table-responsive">
<Grid items={entryData}/>
</div>
</div>
</div>
<div className="clearfix"></div>
</div>
</div>
);
}
}
export default Dashboard;
所以在上面的代碼TAB1被變爲0時，網址爲返回回來。我在反應週期中錯過了什麼？
如果任何其他代碼需要請告訴我..