Question

这是我的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 UserBase并且仪表板加载时调用ajax请求来加载数据。在此之后，当我将网址更改为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;

因此在上面的代码中，当url返回时，tab1变为0。我在反应循环中错过了什么？

如果需要其他任何代码，请告诉我..

Answer 1

如果仪表板需要特定数据，我认为每当安装仪表板时进行ajax调用会更好，Dashboard类中的componentWillMount可能是一个很好的地方。

如何在更改url后再次呈现组件

1 个答案: