每次在反应本机中聚焦页面时调用 componentWillMount

Posted 2023-02-23

【中文标题】每次在反应本机中聚焦页面时调用 componentWillMount

【英文标题】：Calling componentWillMount every time focused page in react native

【发布时间】：2020-05-02 01:27:45

【问题描述】：

我想在每次关注页面时调用 componentWillMount。我使用 react-redux 和 react-navigation。

通过 react-navigation，我使用 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));

【参考方案1】：

您可以在您的 componentWillMount 中添加它，并且无论您在 addListener 中写入什么，它都会每次都执行：

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

      this.getData();
    );

【讨论】：

好的，谢谢。我没有正确理解它。即便如此，如果我转到下一页然后返回，我仍然会看到旧页面片刻。有什么想法可以解决吗？谢谢

那是因为该操作是异步的。如果您想明确地重新开始一个新页面，请尝试使用 navigation.push(screen:) 而不是 navigation.navigate(scree

如果您发现我的回答对您有帮助，请点赞:)