CODEWITHSUNDEEP
javascriptreactjs
handsome
handsome

Reputation: 2422

fetch Data when context changes in React

I need to make a new api request to fetch data for a given dataId. this value lives in the Context. 

import { MyContext } from './Context'

class MyComponent extends Component {

    constructor(props) {
        super(props)

        this.state = {
            dataId: this.context.state.dataId // tried setting state first but didn´t work.
        }

        this.details = this.details.bind(this)
    }

    details() {

        fetch('https://api.mydomain.com/' + this.context.state.dataId)
            .then(response => response.json())
            .then(data => this.setState({ data: data }));
    }

    componentDidMount() {
        this.details()
    }

    render() {

        return(

        <MyContext.Consumer>
            {(context) => (
                <div>data: {JSON.stringify(data)} dataId: {context.state.dataId}</div>

            )}
        </MyContext.Consumer>

        )
    }
}

MyComponent.contextType = MyContext;
export default MyComponent

from others components I can set new values like

this.context.setDataId(1)

and this will show up correctly but the problem is that is not making a new fetch to get new data for the dataId that changed in the Context. not sure what´s the correct lifecycle method I can use to detect changes in the context and make a new call to this.details()

I didn´t add the Context code here because it works fine. but if you need to see it please let me know.

Upvotes: 0

Views: 1719

Answers (1)

r3wt
r3wt

Reputation: 4742

In react, you must use life cycle hooks to inspect data such as props or context, to know if the state needs to update for your component. The most common life cycle hook for this purpose is componentDidUpdate(). it gives you the ability to decide whether or not your component needs to update state/rerender based on changes in props that caused the component to update. the following should work for your use case:

import { MyContext } from './Context'

class MyComponent extends Component {

    state = {
        data:[],
        dataId:null
    }


    details = () => {
        // we only want to update if dataId actually changed.
        if(this.context.state.dataId !== this.state.dataId){
            this.setState({dataId:this.context.state.dataId});
            fetch('https://api.mydomain.com/' + this.context.state.dataId)
                .then(response => response.json())
                .then(data => this.setState({ data: data }));
        }
    }

    componentDidMount() {
        this.details()
    }

    componentDidUpdate() {
        this.details();
    }

    render() {

        return(

        <MyContext.Consumer>
            {(context) => (
                <div>data: {JSON.stringify(this.state.data)} dataId: {context.state.dataId}</div>

            )}
        </MyContext.Consumer>

        )
    }
}

MyComponent.contextType = MyContext;
export default MyComponent;

Upvotes: 1

Related Questions