tlenclos / react-native-audio-streaming

iOS & Android react native module to play an audio stream, with background support and media controls
MIT License
781 stars 255 forks source link

Warning: setState(...) When Navigating away #91

Open radicalnerds opened 7 years ago

radicalnerds commented 7 years ago

My Player component is in a single tab of my app. When I navigate away everything works fine w/ the audio but I get a warning for calling setState on an unmounted component.

'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 Player component.'

This fires off quite often this warning and makes running in DEV mode painful.

My guess would be the correct paradigm is to only setState if mounted and manually get state on mounting in the player code.

componentDidMount() {
    this.subscription = DeviceEventEmitter.addListener(
        'AudioBridgeEvent', (evt) => {
            // We just want meta update for song name
            if (evt.status === METADATA_UPDATED && evt.key === 'StreamTitle') {
                this.setState({song: evt.value});
            } else if (evt.status != METADATA_UPDATED) {
                this.setState(evt);
            }
        }
    );

    ReactNativeAudioStreaming.getStatus((error, status) => {
        (error) ? console.log(error) : this.setState(status)
    });
}
MichaelPintos commented 7 years ago

You need to remove listener in player component. Use this function:
componentWillUnmount() { this.subscription.remove(); }

catalinmiron commented 7 years ago

You can use DeviceEventEmitter.removeAllListeners() or DeviceEventEmitter.removeListener('AudioBridgeEvent')