CODEWITHSUNDEEP
javascriptfirebasereact-nativetry-catchwarnings
user3521011
user3521011

Reputation: 1521

setState: can only update a mounted or mounting component react native /undefined is not an object

I keep getting this warning whenever my internet connection is bad (I'm not sure even if this the right cause for this to happen). I'm getting this in the pages that displays data from Firebase database in react native application (iOS/android). PS: I'm not considering to make the offline mode (it's not a requirement). I'm sharing with you the code I'm using in one of these pages (it's very similar in all pages)

Code

    constructor(props) {
            super(props);
            this.state = {
                dataSource: new ListView.DataSource({
                    rowHasChanged: (row1, row2) => row1 !== row2,
                })
            };

            this.itemsRef = this.getRef().child('path');

        }

        getRef() {
            return firebaseApp.database().ref();
        }
        componentDidMount() {
            this.listenForItems(this.itemsRef);
        }
        listenForItems(itemsRef) {

            itemsRef.on('value', (snap) => {
                if (snap.val()) {
                    var items = [];
                    snap.forEach((child) => {
                        items.push({
                            text : child.val().text,
                            title: child.val().title,
                            key: child.key
                        });
                    });

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

            });

        }

        render() {
            return (
                <View>
                    <ListView
                        automaticallyAdjustContentInsets={true}
                        dataSource={this.state.dataSource}
                        renderRow={this._renderItem.bind(this)}/>
                </View>

            );
        }

        _renderItem(item) {
            return (
                <View>
                    <Text>{item.title}</Text>
                    <Text>{item.text}</Text>
                </View>
            );
        }
    }

and here is the warning I keep getting : enter image description here

It does mention the name of the component but I still don't know what might be the reason for this

UPDATE: I tried this proposed solution : 

componentWillUnmount() {
        this.itemRef.off();
    }

In fact I have a back button that changes from one page to another (each page has her own path and data extracted from Firebase but with similar code) and I get this error: this.itemRef is different in each page. But I get this error : enter image description here Any idea or suggestion .. thank you

Upvotes: 2

Views: 535

Answers (1)

nicokant
nicokant

Reputation: 493

When you subscribe to a reference with on() you'll get the notifications when the database path is modified, that happens also when a component is unmounted. In order to prevent this warning you have to call off() the same database reference on componentWillUnmount

componentWillUnmount() {
  this.itemsRef.off();
}

Upvotes: 1

Related Questions