无法在已卸载的组件上执行React状态更新。内存泄漏

时间:2019-09-24 11:07:23

标签: reactjs react-native react-router reactjs-flux react-native-router-flux

我正在使用react-native-router-flux,并将地址传递给先前的组件。值传递但我得到警告无法对已卸载的状态执行React状态更新要修复,请取消componentWillUnmount方法中的所有订阅和异步任务。


class ChangeAddress extends Component {

  constructor(props) {
    super(props);
    this.state = {
      text:''
    };
    this.handleChange = this.handleChange.bind(this);
  }

    onPressNext =() => {
       Actions.replace('Navigate', {text:this.state.text});
    }

    handleChange(text) {
      this.setState({ text: text });
    }

  render() {
       return(
        <View>
            <TextInput
                placeholder="Enter Address"         
                onChangeText={this.handleChange } 
            />
            <Button title =" Save Address" onPress={this.onPressNext}  />
        </View>
        );
  }
}
export default ChangeAddress;```

1 个答案:

答案 0 :(得分:1)

尝试以下示例代码:-

看看我在何处添加了_isMounted,并在代码中遵循了相同的条件

class Page extends Component {
 _isMounted = false;

 state = {
   isLoading: true
 }

 componentDidMount() {
  this._isMounted = true;

  callAPI_or_DB(...).then(result => {
    if (this._isMounted) {
     this.setState({isLoading: false})
   }
  });
}

componentWillUnmount() {
this._isMounted = false;
}

render() {
  return (
    <div>Whatever</div>
    );
  }
}

export default Page;