如何检查组件是否安装在 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;

原文由 stack Learner 发布，翻译遵循 CC BY-SA 4.0 许可协议

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。这使您的组件“纯粹”并且您的应用程序更加简单和高效。

原文由 Jean Regisser 发布，翻译遵循 CC BY-SA 3.0 许可协议