Вызов componentWillMount каждый раз, когда сфокусированная страница реагирует на нативный

Question

Я хочу вызывать componentWillMount каждый раз, когда я фокусирую страницу. Я использую реагирование-редукцию и реагирование-навигацию.

В случае реакции-навигации я использую import { withNavigationFocus } from 'react-navigation';, чтобы определить, была ли страница активна, но когда я вызываю componentDidMount, через несколько секунд я вижу старое представление. Для этого я хочу вызывать componentWillMount вместо componentDidMount, когда фокус страницы.

Это мой код:

class HomeScreen extends React.Component {

    componentWillMount() {
       this.props._loading(true);
    }

    omponentDidMount() {

    const { navigation } = this.props;
    this.focusListener = navigation.addListener('didFocus', () => {

        this.setState({loading: 0});

        this.props._loading(true);

        Api.get('s?type=Featured')
        .then( response => {
          if (response.profiles){
            this.setState({featured_users: response.profiles, loading: this.state.loading + 1});
          }
        }).catch((error) => {
          console.log(error);
          this.props._loading(false);
        });

        Api.get('s?type=Top')
        .then( response => {
          if (response.profiles){
            this.setState({featured_top: response.profiles, loading: this.state.loading + 1});
          }
        }).catch((error) => {
          console.log(error);
          this.props._loading(false);
        });
     });

  }

  componentWillUnmount() {
    // Remove the event listener
    this.focusListener.remove();
  }

  render() {
    if (this.state.loading >= 4){
      this.props._loading(false);
    }
    return (
       ...
    );
  }
}

const mapStateToProps = (state) => ({
    user: state.reducerUser,
    loading: state.reducerGeneral
});

mapDispatchToProps = dispatch => {
  return {
    _loading: loading => {
      dispatch(actionLoading(loading));
    },
    updateUser: user => {
      dispatch(actionUser(user));
    },
  }
}


export default withNavigationFocus(connect(mapStateToProps, mapDispatchToProps)(HomeScreen));

Answer 1

Вы можете добавить это внутри вашего componentWillMount, и что бы вы ни написали в вашем addListener, оно будет выполняться каждый раз:

this.focusListener = this.props.navigation.addListener('didFocus', () => {
      // The screen is focused

      this.getData();
    });