React Native：只能更新已安装或安装的组件

Question

我正在尝试使用react native，firebase和react-native-router-flux创建一个聊天应用。当我将数据推送到firebase时，它运行良好，但是当我尝试回到上一个场景并试图推送另一个场景时显示警告

  

只能更新已安装或安装的组件

以下是我正在使用的代码

import React, { Component } from 'react';
import { Alert, StyleSheet, AsyncStorage, View, ScrollView, TouchableWithoutFeedback, } from 'react-native';
import { connect } from 'react-redux';
import { Actions } from 'react-native-router-flux';
import {
    Container,
    Header,
    Title,
    Content,
    Footer,
    Item,
    Spinner,
    Input,
    Text,
    Button,
    Thumbnail,
    List,
    ListItem,
    Icon,
    Left,
    Right,
    Body,
    Toast,
} from 'native-base';

import { openDrawer } from '../../actions/drawer';
import styles from './styles';
import Bubbles from './Bubbles'
import FBdb from '../../FBdb.js';

var dateFormat = require('dateformat');
var now = new Date();

class ChatBox extends Component {

    constructor(props){
        super(props)
        this.state = {
            chData: null,
            isLoading: false,
            msgText: '',
        }
        this._isMounted = false;
        this.itemsRef = FBdb.database().ref('/chats');

    }
    static propTypes = {
        name: React.PropTypes.string,
        setIndex: React.PropTypes.func,
        list: React.PropTypes.arrayOf(React.PropTypes.string),
        openDrawer: React.PropTypes.func,
    }

    componentWillMount(){
        this._isMounted = true;
        this.setState({
            isLoading: true,
            msgText: '',
        })
        this.listenForItems(this.itemsRef);
    }

    componentWillUnmount() {
        this._isMounted = false;
    }

    listenForItems(itemsRef) {
        itemsRef.on('value', (snap) => {

            // get children as an array
            var items = [];
            snap.forEach((child) => {
                if (
                    (child.val().chatfrom == this.props.fromUser && child.val().chatto == this.props.uid) ||
                    (child.val().chatfrom == this.props.uid && child.val().chatto == this.props.fromUser)
                ) {
                    if (child.val().chatfrom == this.props.fromUser) {
                        items.push({
                            name: child.val().name,
                            text: child.val().text,
                            _key: child.key,
                            cAlign: 'right'
                        });
                    }
                    else {
                        items.push({
                            name: child.val().chattoName,
                            text: child.val().text,
                            _key: child.key,
                            cAlign: 'left'
                        });
                    }

                }

            });

            this.setState({
                chData: items,
                isLoading: false,
            });

        });
    }

    MakeMsgList(items) {
        const listItems = items.map((item) =>
        // <View
        //     style={ styles.chatRow }
        //     key={item._key.toString()}>
        //     <View
        //         style={ bubbleStyles[item.cAlign].chContainer }>
        //         <TouchableWithoutFeedback>
        //             <Text>{item.text}</Text>
        //         </TouchableWithoutFeedback>
        //     </View>
        // </View>
        <Bubbles
            key={item._key.toString()}
            name={item.chattoName}
            text={item.text}
            position={item.cAlign}
         />
        );
        return listItems;
    }

    _sendChatmsg(){
        this.itemsRef.push({
            chatfrom: this.props.fromUser,
            chatto: this.props.uid,
            chattoName: this.props.uname,
            dateTime: dateFormat(now, "isoDateTime"),
            text: this.state.msgText,
            name: '',
        })
    }

    render() {
        const { props: { name, index, list } } = this;

        if(this.state.isLoading){
            return (
                <View style={ styles.loaderSpin }>
                    <Spinner color='blue' />
                </View>
            );
        }

        return (
            <View style={ styles.container }>
                <Header>
                    <Left>
                        <Button transparent onPress={() => Actions.pop()}>
                            <Icon name="ios-arrow-back" />
                        </Button>
                    </Left>

                    <Body>
                        <Title>{(this.props.uname) ? this.props.uname : ''}</Title>
                    </Body>

                    <Right>
                        <Button transparent>
                            <Icon name="md-person" />
                        </Button>
                    </Right>
                </Header>
                <View style={ styles.chatContainer }>
                    <ScrollView style={ styles.chatMsg }>
                        <View style={ styles.ChatInner }>

                            {/* <List dataArray={this.state.chData}
                                scrollToEnd={{animated: true}}
                                renderRow={(item) =>
                                    <ListItem avatar
                                        style={ styles.chatRow }>
                                        <Left>
                                            <Thumbnail small source={{uri: "http://allstariq.tbltechnerds.com/"+item.userimg}} />
                                        </Left>
                                        <Body>
                                            <Text>{item.text}</Text>
                                        </Body>
                                    </ListItem>
                                }>
                            </List> */}
                            {this.MakeMsgList(this.state.chData)}

                        </View>
                    </ScrollView>
                    <View style={ styles.WriteChat }>
                        <Item>
                            <Input
                                ref={component => this.chatInput = component}
                                onChangeText={(text) => this.setState({msgText: text})}
                                value={this.state.msgText}
                                placeholder='Type message here . . .'/>
                            <Icon
                                onPress={() => this._sendChatmsg()}
                                active
                                name='send' />
                        </Item>
                    </View>
                </View>
            </View>
        );
    }
}


function bindAction(dispatch) {
    return {
        openDrawer: () => dispatch(openDrawer()),
    };
}

const mapStateToProps = state => ({
    name: state.user.name,
    index: state.list.selectedIndex,
    list: state.list.list,
});


export default connect(mapStateToProps, bindAction)(ChatBox);