Question

85

How to fetch data when a React component prop changes?

rated 0 times [ 90] [ 5] / answers: 1 / hits: 55903 / 8 Years ago, wed, august 17, 2016, 12:00:00

My TranslationDetail component is passed an id upon opening, and based on this an external api call is triggered in the class constructor, receiving data to the state, and this data being displayed on TranslationDetail.

//Routing:

<Route path=/translation/:id component={TranslationDetail}/>



//Class:    

class TranslationDetail extends Component {

  constructor(props){

    super(props);



    this.props.fetchTrans(this.props.params.id);

  }

This all works fine if I enter the url manually. In case I'd like to use react-router e.g. for displaying the next item like below the url does change, but the api call is not triggered, and the data will remain the same.

<button 

  type=button

  onClick={() => 

    browserHistory.push(`/translation/${Number(this.props.params.id)+1}`)}>

  Next

</button>

Please bear in mind that I'm a total beginner. The reason why this is happening is I believe that the constructor is run only once, thus no further api call is triggered.

How can I solve this?
Do I need to listed to props and call a function on change? If yes, how?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

janjadonb

Add To Favorites

Follow

Total Points: 4

Total Questions: 114

Total Answers: 118

Location: Mali

Member since Fri, Dec 3, 2021

2 Years ago

answered 8 Years ago lucianom · Accepted Answer

Constructor is not a right place to make API calls.

You need to use lifecycle events:

componentDidMount to run the initial fetch.

componentDidUpdate to make the subsequent calls.

Make sure to compare the props with the previous props in componentDidUpdate to avoid fetching if the specific prop you care about hasn't changed.

class TranslationDetail extends Component {    

   componentDidMount() {

     this.fetchTrans();

   }



   componentDidUpdate(prevProps) {

     if (prevProps.params.id !== this.props.params.id) {

       this.fetchTrans();

     }

   }



   fetchTrans() {

     this.props.fetchTrans(this.props.params.id);

   }

}