如何检查组件是否安装在 React-Native ES6 中

Question

我在我的应用程序中设置了一个监听器，并在广播时使用强制更新，但它给出了错误 forceUpdate cant be called on unmounted component。不推荐使用 isMounted() 函数后，如何检查组件是否已挂载。

'use strict';
var React = require('react-native');
import ExpAndroid from './ExpAndroid';
var {
  AppRegistry,
  Image,
  ListView,
  TouchableHighlight,
  StyleSheet,
  Text,
  View,
  Component,
  AsyncStorage,
  Navigator,
  DeviceEventEmitter
} = React;

var rowID;
var img=require('./resource/ic_pause_white.png');





class Example1 extends Component{
  constructor(props) {
    super(props);
    this.state = {

    };
  }
  componentWillMount(){

      rowID = this.props.rowIdentity;
      console.log("rowID "+rowID);

  }


componentDidMount(){
  console.log('component  mounted')
  this.start();

  DeviceEventEmitter.addListener('playMusicStatus', (data)=> {


   if(data.playMusic==true){

     img=require('./resource/ic_pause_white.png');
       rowID++;
        this.setState(this.state);
        ExpAndroid.someMethod1("someurl);


  }



});
}

componentWillUnmount(){
  console.log('componentwill  unmounted')
}

  start() {

    var  url = "some url";
    ToastAndroid.prepareToPlay(url,true);
}



render() {




     return (
      <Image source={require('./resource/album_back.png')} style={styles.background}>
      <Image
      source={{uri:this.state.trackDetails[rowID].thumnail_loc}}
      style={styles.thumbnail}
      />
      <View style={styles.flowRow}>
      <Text
      style={styles.titles}
      >text1 + {rowID}: </Text>
      <Text
      style={styles.titles}
      >{this.state.details[rowID].text1}</Text>
      </View>
      <View style={styles.flowRow}>
      <Text
      style={styles.titles}
      >text2 : </Text>
      <Text
      style={styles.titles}
      >{this.state.details[rowID].text2}</Text>
      </View>
      <View style={styles.flowRow}>
      <Text
      style={styles.titles}
      >Text3 : </Text>
      <Text
      style={styles.titles}
      >{this.state.Details[rowID].Text3}</Text>
      </View>
      <View style={styles.flowRow}>
      <Text
      style={styles.titles}
      >Text4 : </Text>
      <Text
      style={styles.titles}
      >{this.state.details[rowID].Text4}</Text>
      </View>


      </Image>
    );
  }
}
var styles = StyleSheet.create({

  container: {
    flex: 1,

  },
  background: {
    flex: 1,

    width: null,
    height: null,
  },

  flowRow : {
    flexDirection :'row',

  },
  flowRowPlay : {
    flexDirection :'row',
    alignSelf:'center',

  },
  backgroundImage: {
    flex: 1,
    resizeMode: 'cover', // or 'stretch'
  },

  thumbnail: {
    width: 100,
    height: 120,
    alignSelf:'center',
    margin :30
  },

  controls: {
    width: 30,
    height: 30,
    margin:20
  },


  titles: {
    fontSize: 15,
    margin:20,
    color: 'white',

  },
  timings: {
    fontSize: 12,
    margin:5,
    color: 'white',

  },
});

module.exports = Example1;

Answer 1

你可以在你的组件中自己处理这个：

componentDidMount() { 
  this._mounted = true;
}

componentWillUnmount() {
  this._mounted = false;
}

然后你可以在你的监听器中检查this._mounted的值。

请注意，应避免使用forceUpdate() https://facebook.github.io/react/docs/component-api.html#forceupdate

通常你应该尽量避免使用 forceUpdate() 并且只从 render() 中的 this.props 和 this.state 中读取。这使您的组件“纯粹”并且您的应用程序更加简单和高效。

Answer 2

使用ReactUpdateQueue，您可以避免管理自己的isMounted 状态。

const ReactUpdateQueue = require('ReactUpdateQueue');

// Pass the ref to your component.
if (ReactUpdateQueue.isMounted(view)) {
  // Your component is mounted!
}

Answer 3

我所做的是更改 componentWillMount 中的回调。

let asyncCallback;

componentDidMount(){
    asyncCallback = res=> this.setState({data: res});
    asyncTask(asyncCallback);
}

componentWillUnmount(){
    asyncCallback = ()=> console.log("AsyncCallback called but component has unmounted");
}