Do i really need to use forceUpdate with fetch API and ReactJS

Question

I'm using React and fetch() to develop an UI and I ended up doing this:

getOperatorsList: function ( obj ) {
    fetch( 'http://x.x.x.x/operators.list',
        {
            method: 'GET',
            credentials: 'include'
        }
    ).then( function ( response ) {
            return response.json()
        } ).then( function ( json ) {
        if ( json.statusCode === 3 ) {
            cookieService.unsetCookie( 'sessId' );
        }
        obj.setState( { data: json }, () => obj.forceUpdate() );
    } ).catch( function ( ex ) {
        console.log( 'parsing failed', ex );
    } )

}

This is called in my component Operators that looks like this

var Operators = React.createClass( {

    getInitialState: function () {
        return {
            data: [{ "data": "Loading" }]
        }
    },

    componentDidMount: function () {
        operatorsService.getOperatorsList( this );
    },

    render: function () {
        return (
            <div>
                <Row >
                    <Col>
                        <DataTablesCustom data={this.state.data} />
                    </Col>
                </Row>
            </div>
         );
     }
});

I already had a look at this question, and the code doesn't work for me.

This works fine but do I really need to use forceUpdate() or do I have a way to make the code "cleaner" ?

EDIT: there was a setState that looked like this this.setState({stuff: stuff}, this.function()}); in a child component. I was able to remove forceUpdate() after changing the setState to this.setState({stuff: stuff}, () => this.function()});.

Without it, the data i want is not showing when the page loads. — Harmeko
– Harmeko, Commented Oct 12, 2016 at 14:51
So you have your answer, you must use it ;) (this code looks clear for me) — Steeve Pitis
– Steeve Pitis, Commented Oct 12, 2016 at 14:53
This is mostly about how the ReactJS doc says that forceUpdate() should be avoided but i wanted another point of view. thanks :) — Harmeko
– Harmeko, Commented Oct 12, 2016 at 14:57
@Steeve Pitis that code does not look clean at all. Also, he doesn't really have to call forceUpdate at all if he restructure his code a bit better. — fabio.sussetto
– fabio.sussetto, Commented Oct 12, 2016 at 15:10

fabio.sussetto · Accepted Answer · 2016-10-12 15:43:25Z

0

To get your code to work, you can try to do this in the service:

obj.setState.bind(obj)( { data: json });

However, there is no need to pass the component object to your service. Arguably, that's not such a good idea as you're just coupling things when it's not needed. Let the component call your service and then decide what to do with the data:

 getOperatorsList: function () {
    return fetch( 'http://x.x.x.x/operators.list', {
        method: 'GET',
        credentials: 'include'
    }).then( function ( response ) {
        return response.json()
    }).then( function ( json ) {
        if (json.statusCode === 3 ) {
            cookieService.unsetCookie( 'sessId' );
        }
        return json;
    }).catch( function ( ex ) {
      console.log( 'parsing failed', ex );
    })

}

Then in your component:

componentDidMount: function () {
    operatorsService.getOperatorsList()
    .then(function (json) {
       this.setState({ data: json });
    }.bind(this))
}

edited Oct 12, 2016 at 15:43

answered Oct 12, 2016 at 15:06

fabio.sussetto

7,0653 gold badges28 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Steeve Pitis Over a year ago

You forgot to return the promise in getOperatorsList

Harmeko Over a year ago

I'm getting 'Uncaught TypeError: Cannot read property 'then' of undefined' and the question i quoted did this plus added a return before fetch() but this doesn't work either. i'm getting the same behaviour as before.

fabio.sussetto Over a year ago

@Harmeko sorry, I just forgot to return the promises, I updated getOperatorsList with the return statement.

Harmeko Over a year ago

It still doesn't work. I really don't understand what's wrong. And there's more, when i tried to console.log(this); inside your then() and look at the state, there's data in it but not if i console.log(this.state.data).

fabio.sussetto Over a year ago

@Harmeko from the React docs: facebook.github.io/react/docs/component-api.html "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." That's why console.log(this.state) doesn't show you the data. If it still doesn't work, please try to debug/ console.log(this.state.data) in render and see what happens.

|

Collectives™ on Stack Overflow

Do i really need to use forceUpdate with fetch API and ReactJS

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related