reactjs - React-Data-Grid render object issue -
i'm trying use reactdatagrid web application. i'm living issue while rendering. have cluster objects rendered. clusters can choosen 1 one click or there select all feature. when click select-all button, data grid render data smoothly. whereas, when i'm trying choose clusters 1 one, data-grid starts render after second object of array. tried see what's happening console.log().for example, when there object in array, length of array printed 0. so, follows -1 every time.
here cluster object. , under object, printed it's length.
console.log("this.props.clusterpointsarray: ",this.props.clusterpointsarray); console.log("this.props.clusterpointsarray.length: ",this.props.clusterpointsarray.length); is there wrong object - array relation? mean should convert object array?
please help.
and here clusterdetailgrid component file.
import react, {component} 'react'; import reactdatagrid 'react-data-grid'; import {maparrayreselect, connectcomponent} 'flightsuit'; import moment 'moment'; import _ 'lodash'; export default connectcomponent(class clusterdetailgrid extends component { state = { isclusterdetailactive: false, }; static mapstate2props(state) { return { activetenant: state.tenant.activetenant, activeroutesstoplist: state.route.activeroutesstoplist, activeclusters: state.clusterprofile.activeclusters, selectedclusters: state.clusterprofile.selectedclusters, clusterpointsarray: state.clusterprofile.clusterpointsarray, clusterpoints: state.clusterprofile.clusterpoints, profileslist: state.clusterprofile.profileslist, activeprofile: state.clusterprofile.activeprofile }; } constructor(props) { super(props); this._columnss = [ { key: 'clustername', name: 'cluster name' }, { key: 'customerrefno', name: 'customer number' }, { key: 'customername', name: 'customer name' } ]; } componentwillmount() { } componentdidmount() { } componentwillupdate(nextprops) { this.createrows(nextprops.clusterpointsarray); } createrows(cluster) { let rows = []; for(let = 0; < cluster.length; i++) { for(let j = 0; j < cluster[i].location.length; j++){ rows.push({ clustername: cluster[i].name, customerrefno: cluster[i].location[j].name, customername: cluster[i].location[j].description!=null?cluster[i].location[j].description:" " }); } } this._rows = rows; } rowgetter(i) { return this._rows[i]; } render() { console.log("this.props.clusterpointsarray: ",this.props.clusterpointsarray); console.log("this.props.clusterpointsarray.length: ",this.props.clusterpointsarray.length); return ( this.props.clusterpointsarray.length > 0 ? <reactdatagrid columns={this._columnss} rowgetter={this.rowgetter.bind(this)} rowscount={this._rows.length} overscan={{ colsstart: 5, colsend: 5, rowsstart: 5, rowsend: 25 }} /> : <div>your cluster details loading...</div> ); } });


Comments
Post a Comment