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

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.

I don't suppose this is an electron specific problem. – Yan Foto Sep 08 '15 at 09:33 — Yan Foto, Sep 08 '15 at 09:33

score 1 · Answer 1 · answered Sep 08 '15 at 07:18

1

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

answered Sep 08 '15 at 07:18

gyzerok

1,338
2
11
26

yah then i got this Error: Invariant Violation: child typ e should be or – Hussian Shaik Sep 08 '15 at 09:16
So thats the problem. Solve it and all would work as expected. – gyzerok Sep 09 '15 at 05:32

Danillo Felixdaal · Answer 2 · 2015-09-08T21:31:59.483

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)

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

2 Answers2