texas697 texas697 - 6 months ago 97
Node.js Question

how to resolve a react native EventEmitterListener warning

I am using a event emitter to communicate between a map component and the toolbar. Note* I am using this same code in other parts of my app without issue. The error I am getting is :


Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the undefined component.


I have tried to solve this by similar posts but it is not working. I thought it had to do with the mount && unmount methods in both components?

Toolbar Component

componentDidMount() {
this.showLocateIconListener = AppEventEmitter.addListener('isTrip', this.isTrip.bind(this));
this.endTripListener = AppEventEmitter.addListener('showLocateIcon', this.showLocateIcon.bind(this));
this.endSubdivisionIcon = AppEventEmitter.addListener('showSubdivisionIcon', this.showSubdivisionIcon.bind(this));
}

componentWillUnMount() {
this.showLocateIconListener.remove();
this.endTripListener.remove();
this.endSubdivisionIcon.remove();
}


//// this is where the error is happening
showSubdivisionIcon(val) {
if (val != 0)
this.setState({
items: menuSubdivision,
subdivisionId: val
})
else
this.setState({
items: menu
})
}


Map component

onMarkerPress(val) {
AppEventEmitter.emit('showSubdivisionIcon', val.id);
}


The console error detail for the EventEmitter.js leads to this

subscription.listener.apply(
subscription.context,
Array.prototype.slice.call(arguments, 1)
);


Complete section in EventEmitter.js

/**
* Emits an event of the given type with the given data. All handlers of that
* particular type will be notified.
*
* @param {string} eventType - Name of the event to emit
* @param {...*} Arbitrary arguments to be passed to each registered listener
*
* @example
* emitter.addListener('someEvent', function(message) {
* console.log(message);
* });
*
* emitter.emit('someEvent', 'abc'); // logs 'abc'
*/
emit(eventType: String) {
var subscriptions = this._subscriber.getSubscriptionsForType(eventType);
if (subscriptions) {
var keys = Object.keys(subscriptions);
for (var ii = 0; ii < keys.length; ii++) {
var key = keys[ii];
var subscription = subscriptions[key];

// The subscription may have been removed during this event loop.
if (subscription) {
this._currentSubscription = subscription;
subscription.listener.apply(
subscription.context,
Array.prototype.slice.call(arguments, 1)
);
}
}
this._currentSubscription = null;
}
}

Answer

The only problem is that your event listeners are not removed, because the name of the componentWillUnmount method is incorrect. In your code the M of mount is capital, where as it should be lowercase.

componentWillUnmount() {
    this.showLocateIconListener.remove();
    this.endTripListener.remove();
    this.endSubdivisionIcon.remove();
}