ComponentWillReceiveProps не вызывается, когда мы перемещаемся между компонентами стекового навигатора? - PullRequest
Новая
       29

ComponentWillReceiveProps не вызывается, когда мы перемещаемся между компонентами стекового навигатора?

0 голосов
/ 07 ноября 2018 
export default (DrawNav = createStackNavigator(
  {
    Home: { screen: Home },
    QuestionDetail: { screen: QuestionDetail },
    QuestionAsk: { screen: QuestionAsk }
  },
  {
    initialRouteName: "Home",
    headerMode: "none"
  }
));

Компонент Home содержит список вопросов, а QuestionDetail показывает подробную информацию о вопросах, но вот проблема, с которой я сталкивался, всякий раз, когда вы возвращаетесь домой из QuestionDetail или другого компонента, я хочу получить вопросы, и вот что я делал в компоненте Home, 

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('/');
        })
}

но componentWillReceiveProps не вызывается при переходе от QuestionDetail к Home?

1 Ответ

0 голосов
/ 07 ноября 2018

componentWillReceiveProps срабатывает только при обновлении реквизита компонента, а не при первоначальной визуализации. Как говорится в документации ,

React не вызывает UNSAFE_componentWillReceiveProps () с начальными реквизитами во время монтирования. Он вызывает этот метод только в случае обновления некоторых реквизитов компонента. Вызов this.setState () обычно не вызывает UNSAFE_componentWillReceiveProps ().

componentWillReceiveProps устарело, особенно потому, что оно часто используется неправильно. Для асинхронных действий предполагается использовать componentDidMount и componentDidUpdate вместо componentWillMount и componentWillReceiveProps:

Если вам необходимо выполнить побочный эффект (например, выборку данных или анимацию) в ответ на изменение реквизита, используйте вместо этого жизненный цикл componentDidUpdate.

Если одна и та же логика применима к обоим хукам, должен быть метод для повторного использования. Уже есть такой метод, getQuestions: 

componentDidMount() {
    this.getQuestions();
}

componentDidUpdate() {
    this.getQuestions();
}

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

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