React setstate does not work in IE unless timeout is used

Question

I have below method where am making a service call using whatwg-fetch. setstate does not work with IE browser. It works fine with other browsers.

After i enclosed setstate within settimeout it works good in IE.

Not sure this timeout will affect once its deployed in prod servers and time delay for response gets increased. Please suggest me with an ideal solution for this issue. Thanks!

        fetch("/local/addThings").then(res => res.json())
            .then(
                (result) => {
                 setTimeout(() => {
                    this.setState({
                        value: "edit",
                        items: result
                    });
                     }, 1000);
                       }
            )
            .catch(error => console.error('Error:', error));
    }```

score 0 · Answer 1 · answered Sep 19 '19 at 20:13

This may be because of the time delay in getting the result. You could put in a conditional statement before setting the state to check that a result has been received.

fetch("/local/addThings").then(res => res.json())
  .then(
    (result) => {
      if (result) {
        this.setState({
          value: "edit",
          items: result
        });
      }
    } else {
      setTimeout(() => {
        this.setState({
            value: "edit",
            items: result
        });
         }, 1000);
    }
  )
  .catch(error => console.error('Error:', error));
}

I also noticed you have two .then statements. What if you set the state with the first one like this?

fetch("/local/addThings")
  .then(res => 
    this.setState({
      value: "edit",
      items: res
    })
  )
  .catch(error => console.error('Error:', error));
}

score 0 · Answer 2 · answered Sep 19 '19 at 21:18

0

It may have to do with setState being asynchronous:

You can try to remove the setTimeout and give setState a function instead of an object, like this:

this.setState(() => ({
  value: "edit",
  items: result
}));

answered Sep 19 '19 at 21:18

JeromeBu

1,099
7
13

Yu Zhou · Answer 3 · 2019-09-20T06:19:21.357

0

That's because calling setState() in React is asynchronous and it doesn't always immediately update the component. Please check the official documentation about setState().

You could use componentDidUpdate or a setState callback (setState(updater, callback)), either of which are guaranteed to fire after the update has been applied. We just need to get the updated state in the callback:

this.setState({ value: "edit", items: result },()=>{
    console.log(this.state.value); //any function u want to call after state changed
});

edited Sep 20 '19 at 06:19

answered Sep 20 '19 at 06:07

Yu Zhou

11,532
1
8
22

My scenario is I need to fetch the result from the api call and render based upon the values returned through result . So its the other way around. I need the result from the api call and then state needs to be set based on the result. – jackson89 Sep 20 '19 at 14:31
`setState()` will always lead to a re-render unless `shouldComponentUpdate()` returns false. You could refer to [this thread](https://stackoverflow.com/questions/24718709/reactjs-does-render-get-called-any-time-setstate-is-called) for more information. You could also refer to [this article](https://davidwalsh.name/react-force-render) about forcing react component render. – Yu Zhou Sep 23 '19 at 02:18

React setstate does not work in IE unless timeout is used

3 Answers3