リアクションネイティブ。マウントされたコンポーネントまたはマウントされているコンポーネントのみをアップデートすることができます

Question

import React, {Component} from 'react' 

import { 
    Image, 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    TextInput, 
    TouchableOpacity, 
    ListView, 
    TouchableHighlight 
} from 'react-native' 

import ViewContainer from '../../components/ViewContainer'; 
import StatusbarBackground from "../../components/StatusbarBackground"; 
import firebase from 'firebase'; 

export default class Comments extends Component { 
    constructor(props) { 
     super(props) 

     const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 

     this.state = { 
      dataSource: ds.cloneWithRows(['row 1', 'row 2']), 
      comment: '', 
      post: '', 
     } 

     this.componentDidMount(); 

     this.componentDidMount = this.componentDidMount(this); 
     this.listenForItems = this.listenForItems.bind(this); 
     this.renderItem = this.renderItem.bind(this); 

     this._comment = this._comment.bind(this); 
    } 

    componentDidMount() { 
     var commentsRef = firebase.database().ref('/comments')    
     this.listenForItems(commentsRef); 
    } 

    listenForItems(commentsRef) { 
     var commentsRef = firebase.database().ref('/comments') 
     commentsRef.on('value', snap => { 
      var items = []; 
      snap.forEach((child) => { 
       if(child.val().post == this.state.post){ 
       items.push({ 
        post: child.val().post, 
        email: child.val().email, 
        comment: child.val().comment, 
        uid: child.key 
       }); 
       } 
      }); 

      var temp = [] 
      var len = items.length; 
      for (var i = (len - 1); i >= 0; i--) { 
      temp.push(items[i]); 
      } 
      items = temp; 

      this.setState({ 
      dataSource: this.state.dataSource.cloneWithRows(items) 
      }); 
     }); 
    } 

    _comment(post) { 
     var commentRef = firebase.database().ref('/comments'); 
     var curr = firebase.auth().currentUser.email; 

     var newComment = commentRef.push(); 
     newComment.set({ 
      'post': post, 
      'email': curr, 
      'comment': this.state.comment, 
     }); 
    } 

    renderItem(item) {  
     return (
      <TouchableHighlight> 
      <View style={styles.post}> 
       <Text style={styles.email}>{item.email}{' said:'}</Text> 
       <Text style={styles.text}>{item.comment}</Text> 
       <Text style={styles.line}></Text> 
      </View> 
      </TouchableHighlight> 
     ) 
    } 

    render() { 

     this.state.post = this.props.post 

     return (
      <ViewContainer> 
       <StatusbarBackground /> 

       <Image style={styles.title} 
           source={require('../../images/comment.png')} 
          /> 

       <TextInput 
        style={styles.textinput} 
        multiline={true} 
        placeholder = "Write something..." 
        onChangeText={(comment) => this.setState({comment: comment})} 
        value={this.state.comment} 
        placeholderTextColor = 'black' 
        underlineColorAndroid = 'white' 
        autoCorrect = {false} 
       /> 

       <View style={styles.comment}> 
        <TouchableOpacity onPress={() => {this._comment(this.props.post)}}> 
          <Text>Publish</Text> 
        </TouchableOpacity> 
       </View> 

       <View style={styles.container}> 
        <ListView 
         dataSource={this.state.dataSource} 
         renderRow={this.renderItem} /> 
       </View> 

      </ViewContainer> 
     ) 
    } 
} 

私は投稿、好き嫌い、コメントでソーシャルアプリを作っています。投稿のコメントを見たいときは、すべてのコメントをリストビューに表示します。最初の試行はうまくいきますが、他の投稿のコメントを見たい場合はこのエラーが出ます。

私はcomponentWillUnmount（）を使用しなければならないと思うが、そこに置く必要があるコードはidkだ。どんなイデオリア？ありがとう！

Answer 1

コンストラクタからthis.componentDidMount（）を削除し、バインド先の行を削除します。 Reactコンポーネントのライフサイクルで自動的に呼び出されます。これは、Componentを拡張するために利用可能です。リスナーを除去するために

this.commentsRef.off(...)

：

また、のようなものを呼び出す必要がありcomponentWillUnmount機能を持っている必要があります。これを正しく実行するには、commentsRefコールバックを独自のクラス関数（onCommentsRefValueなど）に移動してからthis.commentsRef.on('value', this.onCommentsRefValue)を呼び出し、その後componentWillUnmountで呼び出すことができます。this.commentsRef.off('value', this.onCommentsRefValue)