React API call after component re-render

Question

I have a componentDidMount where I am calling an API and then have a this.setState({...this.state}).

Inside render, I have a button that calls delete function. Now when this delete is called I am re-rendering but I also want this API that is present in componentDidMount to be called because the delete functionality deletes some data in the same component, which should show updated value later.

The problem is, when I reload the page I get the data required but re-rendering does not show the required data.

When the item is deleted you need to setState again with new state for component to show updated items. — Shivam
– Shivam, Commented Oct 30, 2018 at 10:41
It would be better to see the actual code in addition to the description of the code. — JJJ
– JJJ, Commented Oct 30, 2018 at 10:43

Shubham Khatri · Accepted Answer · 2018-10-30 10:42:21Z

1

Practically the API call code that you write in componentDidMount could be written as a separate function which you can then call, when you delete the data.

componentDidMount() {
    this.fetchData();
}

// using arrow function to achieve correct context binding
fetchData = () => {
   // your API call here
} 

delete = () => {
   // call fetchData here after delete
   this.fetchData();
}

answered Oct 30, 2018 at 10:42

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

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

1 Comment

Mr.Singh Over a year ago

I agree with @Shubham Khatri. Here is how i fixed this issue. stackoverflow.com/questions/54892155/…

amdev · Accepted Answer · 2018-10-30 11:00:30Z

0

if your react version is going to be less than 16 , then you can us componentDidUpdate for that. This is been deprecated but still you can use UNSAFE_ flag before its name.

check this link from stackoverflow itself for a real world example: here

if you want to use a more robust way of handling that in react version 16 and above you could use getDerivedStateFromProps , for that you can check the corresponding way of handeling it from stackoverflow: here

edited Oct 30, 2018 at 11:00

answered Oct 30, 2018 at 10:54

amdev

7,8307 gold badges52 silver badges69 bronze badges

Collectives™ on Stack Overflow

React API call after component re-render

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related