Wsrtjtyk

export default (DrawNav = createStackNavigator(

  {

    Home: { screen: Home },

    QuestionDetail: { screen: QuestionDetail },

    QuestionAsk: { screen: QuestionAsk }

  },

  {

    initialRouteName: "Home",

    headerMode: "none"

  }

));

Home component lists questions and QuestionDetail shows detail information of the questions but here is the problem that i faced, whenever you back to home from QuestionDetail or other component i want to grab the questions and here is what i did in Home component,

componentDidMount() {

    this.getQuestions();

}



componentWillReceiveProps() {

    this.setState({ questions:  }, () => {

        this.getQuestions();

    });

}



getQuestions() {

    this.setState({ isLoading: true });

    axios.get(`http://${IP_ADDRESS}/api/questions`)

        .then(response => {

            console.log('response data: ', response.data);

            this.setState({ questions: response.data, isLoading: false })

        })

        .catch((err) => {

            this.setState({ isLoading: false });

            console.log('QUESTIONS ERR: '+err);

            // this.props.history.push('/');

        })

}

but componentWillReceiveProps is not called when you navigate from QuestionDetail to Home?

componentWillReceiveProps is triggered only when component prop updates and not on initial render. As the documentation states,

React doesn’t call UNSAFE_componentWillReceiveProps() with initial props during mounting. It only calls this method if some of component’s props may update. Calling this.setState() generally doesn’t trigger UNSAFE_componentWillReceiveProps().

componentWillReceiveProps is deprecated, particularly because it's often misused. For asynchronous actions componentDidMount and componentDidUpdate are supposed to be used instead of componentWillMount and componentWillReceiveProps:

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.

If same logic is applicable to both hooks, there should be a method to reuse. There's already such method, getQuestions:

componentDidMount() {

    this.getQuestions();

}



componentDidUpdate() {

    this.getQuestions();

}



getQuestions() {

    this.setState({ isLoading: true, questions:  });



    axios.get(`http://${IP_ADDRESS}/api/questions`)

    ...

}