Statement is not being reached after setting State in react ES-6 - reactjs

Question

In this react code i am trying to set the data to current state,After setting the data to state i need to use it in fixed data table.To achieve it, i wrote as below.The main issue is that the statement next to "this.setState" in componentDidMount is not being executed/reached where i need to call data table function there.
here is my code:
export default class Main extends React.Component {
constructor(props) {
super(props);
this.state = {
result: [],
loading: false,
filteredRows: null,
filterBy: null,
};
}
getZipData() {
//Here i got the data from server
}
componentDidMount() {
this.getZipData().then((data)=>{
console.log("data:"+data.length);
this.setState({result:data,loading:true}); //state successfully set here.
console.log("result:*******************"+this.state.result.length); //this console is not printed
this._filterRowsBy(this.state.filterBy)
});
};
_rowGetter(rowIndex){
alert("row Getter");
return this.state.filteredRows[rowIndex];
}
_filterRowsBy(filterBy){
var rows = this.state.result.slice();
var filteredRows = filterBy ? rows.filter((row)=>{
return row.RecNo.toLowerCase().indexOf(filterBy.toLowerCase()) >= 0
}) : rows;
this.setState({
filterRows,
filterBy,
})
}
_onFilterChange(e){
this._filterRowsBy(e.target.value);
}
render() {
if(this.state.loading==false) {
return (
<div className="row-fluid">
<img className="col-sm-6 col-sm-offset-3 col-xs-6 col-xs-offset-3"
src="http://www.preciseleads.com/images/loading_animation.gif"/>
</div>
)
}
else{
console.log("result:////////////////////"+this.state.result.length); //this console is printed
console.log("loading completed");
return(
<div>
<!-- fixed data table code goes here -->
</div>
)
}
}
}
state is successfully updated but after that statement is not reached, IN componentDidMount,
any help much appreciated.

Answer 1

Add a catch handler to your Promise. I suppose you are getting an error.

Answer 2

Hi there maybe this is your problem,
Facebook:
setState() does not immediately mutate this.state but creates a
pending state transition. Accessing this.state after calling this
method can potentially return the existing value. There is no
guarantee of synchronous operation of calls to setState and calls may
be batched for performance gains. setState() will always trigger a
re-render unless conditional rendering logic is implemented in
shouldComponentUpdate(). If mutable objects are being used and the
logic cannot be implemented in shouldComponentUpdate(), calling
setState() only when the new state differs from the previous state
will avoid unnecessary re-renders.
this.setState({result:data,loading:true}, () => {
// Your logic
});
the second argument is a callback function which is called after the state is set.
Hope this helps:)
Edit: i didn't see the invariant error, (From the comment, could u provide the full error)