60

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?

Dan Abramov
  • 264,556
  • 84
  • 409
  • 511
balu000
  • 659
  • 1
  • 5
  • 9

4 Answers4

114

Constructor is not a right place to make API calls.

You need to use lifecycle events:

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);
   }
}
allejo
  • 2,076
  • 4
  • 25
  • 40
Yury Tarabanko
  • 44,270
  • 9
  • 84
  • 98
  • Thanks, using these events it's working now correctly. – balu000 Aug 18 '16 at 10:31
  • 1
    Note: I edited the answer because it was unnecessarily complicated. [Syncing state to props](https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html) is generally a bad idea, and in this case you should just be using props. – Dan Abramov Jun 10 '18 at 13:25
  • what if after fetching data want to update the state ? can we do it in componentdidupdate itself or any other recommendations like getDerivedPropsToState? If getDerivedPropsToState uses, it doesnt get latest props from componentdidupdate. – Shamseer Dec 16 '19 at 17:20
7

From React 16.3 and onwards componentWillMount, componentWillUpdate and componentWillReceiveProps are deprecated.

You can use static getDerivedStateFromProps and return a new state based on changes on props.

You don't have access to your this objects like props, so you cannot compare nextProps with your current props by nextProps.sth !== this.props.sth. You can compare you prevState value with nextProps and return new value of state.

Make sue you add UNSAFE_ to your current componentWillMount and the other deprecated lifecyle methods for now.

Tieme
  • 62,602
  • 20
  • 102
  • 156
Kevin
  • 911
  • 1
  • 9
  • 6
0

Use componentWillMount to get the data and set the state. Then use componentWillReceiveProps for capturing update on the props.

You can check the Component Specs and Lifecycle.

JFAP
  • 3,617
  • 1
  • 24
  • 25
-1

I would use the render method. If the data is not loaded I would render a loader spinner and throw the action that fetch de data. For that i usually use the stores. Once the store has de data from the api, mark the data as loaded, throw an event and let the component get the data from the store, replacing the loader spinner with your data representation.

Carlos
  • 1,411
  • 15
  • 21