CODEWITHSUNDEEP
reactjs
R-on
R-on

Reputation: 68

update data which are fetched in componentDidMount

I have two components:

class FloorView extends Component {
constructor (props) {
    super(props);
    this.state = {
        dateBegin: moment(),
        dateEnd: '2018-09-30'
    }
    this.setDateBeginHandler = this.setDateBeginHandler.bind(this);
}

setDateBeginHandler(date) {
    this.setState({
        dateBegin: date
    });
}

render() {
    return (
        <div className="FloorView">
            <div className="Toolbar">
                <DatePicker2 selected={this.state.dateBegin} onChange={this.setDateBeginHandler} />
                <DatePicker className="dateBegin" />
                <DatePicker className="dateEnd" />
            </div>
            <Room dateBegin={this.state.dateBegin.format("YYYY-MM-DD")} dateEnd={this.state.dateEnd} />
        </div>
    );
}

}

and

import React, { Component } from 'react';
import Circle from './Circle/Circle';
import './Room.css';

class Room extends Component {
setDesks(floor) {
    // fetch call which accesses this.props.dateBegin to fetch data
}

componentDidMount() {
    this.setDesks(1);
}

render() {
    return (
        <div>
        ....
        </div>
    );
}

}

If in FloorView the handler setDateBeginHandler() is triggered, the property 'dateBegin' in Room component is changed. How can I call my setDesks() to fetch data again? Until now the change has no impact.

Thanks.

Upvotes: 0

Views: 2711

Answers (3)

Tu Nguyen
Tu Nguyen

Reputation: 10179

The answer for your question is already available in Official React Document: https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops . I will take out the exactly part which you actually need:

If you need to perform a side effect (for example, data fetching or an animation) in response to a change in props, use componentDidUpdate lifecycle instead.

According to the document, whenever you need to perform API calls in response to a change in props, use the componentDidUpdate lifecycle hook.

For example (I also take this example from React Document):

componentDidUpdate(prevProps) {
  // Typical usage (don't forget to compare props):
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

Based on the example, re-writing it in order to fit your own application logic.

Hopefully, it helps.

Upvotes: 3

jymbob
jymbob

Reputation: 488

Assuming setDesks is updating state, you can avoid extra redraws from componentDidUpdate (which will render twice) if you do a small refactor so setDesks takes a couple of extra values (start, end)

Then you can use componentWillReceiveProps on Room

An example would be:

componentWillReceiveProps(nextProps) {
  if (this.props.dateBegin !== nextProps.dateBegin) {
    this.setDesks(1, nextProps.dateBegin, nextProps.dateEnd)
  }
}

Upvotes: 0

Taras Yemets
Taras Yemets

Reputation: 76

Probably, you check the props change in componentDidUpdate lifecycle method.

componentDidUpdate(prevProps) {
  if (prevProps.dateBegin !== this.props. dateBegin) {
    // your methods go here ...
  }
}

Check the docs here: https://reactjs.org/docs/react-component.html#componentdidupdate

If the Room component had its own state you could also use getDerivedStateFromProps() method to track the prop change and to update Room component state due to these changes. Docs: https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops

Upvotes: 1

Related Questions