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（），但是我必须放在那里的代码。任何想法？谢谢！

Answer 1

从构造函数中删除this.componentDidMount（），然后删除绑定它的行。它在React组件生命周期中自动调用，因为您可以扩展Component。

你还应该有componentWillUnmount函数，它应该调用类似的东西：

this.commentsRef.off(...)

为了删除监听器。为了正确地执行此操作，请将commentsRef回调移动到其自己的类函数（将其命名为onCommentsRefValue或其他内容），然后您可以执行this.commentsRef.on('value', this.onCommentsRefValue )，然后在componentWillUnmount中调用this.commentsRef.off('value', this.onCommentsRefValue )

反应母语。只能更新已安装或安装的组件

1 个答案: