CODEWITHSUNDEEP
javascriptarraysjsonreactjs
cbll
cbll

Reputation: 7219

React: Delay rendering of JSON data?

I have the following React class. At first, the console will print an empty array {}, which will return the empty div. However, half a second later the console will print the correct values - but the empty div remains. How should I change the class to properly load the JSON?

var TableData = React.createClass({

    render: function() {
        console.info(JSON.stringify(this.props.summary));

        if (!this.props.data || !this.props.summary) {
            return <div>Loading name table..</div>
        }

        var summary = this.props.table;

        var nameTable =  summary.nameTable;
        var nameTableArr = Object.values(nameTable);
        return ( // A table is returned here, works with the same data structure as is present in the JSON

If I go to the console, the console.info prints an empty JSON string {} initially, which correctly returns the "loading names table..." div. However, data is printed in the console half a second later, but it never proceeds to go out of the if statement and populate the table.

It works if I change the nameTable var to include "manual" data, so it must be something with rendering the server-side data that's delayed half a second.

How could I change the above class to delay rendering for, say, 1 second and then populate the table? It would work in that case I suspect.

Removing the if statement results in Uncaught TypeError: Cannot convert undefined or null to object in the console, which makes sense since the string is indeed empty for half a second.

Upvotes: 0

Views: 210

Answers (1)

Michal Tak&#225;č
Michal Tak&#225;č

Reputation: 1055

Im not a React experienced, but this looks like you have problem with asynchronous behavior.

In order to help you more, Ill need the part of the code where ajax is called.

The whole issue in my opinion is that your code is triggered first when there are no results yet, and after data are loaded it will not trigger again.

So take a closer look at your handling of AJAX async stuff, cause your issue is there.

Upvotes: 1

Related Questions