Javascript 反应自然。只能更新已安装或正在安装的组件 import React，{Component}来自“React” 进口{ 形象,， 评估学， 样式表， 文本， 看法 文本输入， 可触摸不透明度， ListView， 可触摸高光 }从“反应本机” 从“../../components/ViewContainer”导入ViewContainer； 从“../../components/StatusbarBackground”导入StatusbarBackground； 从“firebase”导入firebase； 导出默认类注释扩展组件{ 建造师（道具）{ 超级（道具） const ds=new ListView.DataSource（{rowHasChanged:（r1，r2）=>r1！==r2}）； 此.state={ 数据源：ds.cloneWithRows（['row1'，'row2']）， 评论：“”， 帖子：''， } this.componentDidMount（）； this.componentDidMount=this.componentDidMount（this）； this.listenForItems=this.listenForItems.bind（this）； this.renderItem=this.renderItem.bind（this）； this.\u comment=this.\u comment.bind（this）； } componentDidMount（）{ var commentsRef=firebase.database（）.ref（“/comments”） 此列表格式（commentsRef）； } ListInfo格式（commentsRef）{ var commentsRef=firebase.database（）.ref（“/comments”） commentsRef.on（'value'，snap=>{ var项目=[]； snap.forEach（（子项）=>{ if（child.val（）.post==this.state.post）{ 推({ post:child.val（）.post， 电子邮件：child.val（）.email， 注释：child.val（）.comment， uid:child.key }); } }); var temp=[] var len=items.length； 对于（变量i=（len-1）；i>=0；i--）{ 温度推送（项目[i]）； } 项目=温度； 这是我的国家({ dataSource:this.state.dataSource.cloneWithRows（项目） }); }); } _评论（帖子）{ var commentRef=firebase.database（）.ref（'/comments'）； var curr=firebase.auth（）.currentUser.email； var newComment=commentRef.push（）； 纽康门特({ "岗位":岗位,， “电子邮件”：curr， “comment”：this.state.comment， }); } renderItem（项目）{ 返回( {item.email}{'说：'} {item.comment} ) } render（）{ this.state.post=this.props.post 返回( this.setState（{comment:comment}）} 值={this.state.comment} 占位符文本颜色='黑色' underlineColorAndroid=‘白色’ 自动更正={false} /> {this._comment（this.props.post）}> 发表 ) } }

我正在制作一个包含帖子、喜欢和评论的社交应用程序。当我想看到一篇文章的评论时，我会呈现一个包含所有评论的列表视图。第一次尝试它的工作，但如果我想看到其他帖子的评论，我得到这个错误

---

我想我必须使用组件willunmount（），但是我知道我必须在那里放什么代码。有什么想法吗？谢谢

从构造函数中删除这个.componentDidMount（），并删除绑定它的行。它在React组件生命周期中自动调用，该生命周期是可用的，因为您扩展了组件

您还应具有componentWillUnmount函数，该函数应调用如下内容：

this.commentsRef.off（…）

---

以删除侦听器。为了正确执行此操作，请将commentsRef回调移动到它自己的类函数（称之为onCommentsRefValue或其他什么），然后您可以执行

this.commentsRef.on（'value'，this.onCommentsRefValue）

，然后在componentWillUnmount中调用

this.commentsRef.off（'value'，this.onCommentsRefValue'））

谢谢您的建议！当然会有帮助：）@rafaelqfigueiredo我已经用更多信息更新了答案

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>
        )
    }
}