如何管理组件的安装和卸载以更新状态值?

时间:2019-08-02 06:53:18

标签: react-native cross-platform

我想知道当组件挂载和unmounts时如何管理状态属性。

我的应用程序中有很多不同的组件来维护应用程序流程。我知道函数componentdidmountcomponentWillUnmount。并且我还尝试了有关在_isMounted=true函数上使用componentdidmount和在check _isMounted函数上使用setState时更新update _isMounted=false的{​​{1}}属性值的解决方案。 但是当图片中有两个以上的组件时,这将不起作用。

例如以下链接:

根据示例,我创建了一个通用类,该类将更新componentWillUnmount函数中组件的值,并将返回setMounted函数中的值以验证是否已安装组件。当我从堆栈中调用另一个屏幕并更新一些值,然后返回上一页并刷新页面时,这些方法可以在单个屏幕上正常工作getMounted

ismount=false

在使用安装功能之前,它显示以下警告: 无法在未安装的组件上执行React状态更新

1 个答案:

答案 0 :(得分:0)

您仅创建Mount类的单个实例,该实例在每个组件的每个实例之间导出并共享。您将需要为每个组件实例创建一个新的Mount实例:

class Mount {
   ...
}
// export the Mount class
export default Mount;

class example extends component{
    constructor(props) {
      super(props);
      // create an instance of Mount for each component instance
      this.mount = new Mount();
    }
    componentDidMount=async()=>{
        this.mount.setMounted(true);
        await this.loadScreen();
        this.willFocusSubscription = this.props.navigation.addListener(
            'willFocus',
            async() => {
            await this.loadScreen();
            }
        );
    }
    loadScreen=async()=>{
        //some other stuff
        if(this.mount.getMounted()){//second time value is false
            this.setState({value:'value'});
        }
    }
    componentWillUnmount() {
        this.mount.setMounted(false);
    }
    //renderview where i call example2 on buttonclick

}

请注意,在整个过程中都添加了构造函数并使用this.mount而不是mount