我想知道当组件挂载和unmounts
时如何管理状态属性。
我的应用程序中有很多不同的组件来维护应用程序流程。我知道函数componentdidmount
和componentWillUnmount
。并且我还尝试了有关在_isMounted=true
函数上使用componentdidmount
和在check _isMounted
函数上使用setState
时更新update _isMounted=false
的{{1}}属性值的解决方案。
但是当图片中有两个以上的组件时,这将不起作用。
例如以下链接:
根据示例,我创建了一个通用类,该类将更新componentWillUnmount
函数中组件的值,并将返回setMounted
函数中的值以验证是否已安装组件。当我从堆栈中调用另一个屏幕并更新一些值,然后返回上一页并刷新页面时,这些方法可以在单个屏幕上正常工作getMounted
。
ismount=false
在使用安装功能之前,它显示以下警告: 无法在未安装的组件上执行React状态更新
答案 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
。