'React native undefined is not an object error

I have a MQTTConnection.js class inside a src folder this class defines methods like subscribe, unsubsribe and connect. Also the App.js class implements the methods imported from MQTTConnection.js and defines the prototypes functions that start with ONMQTT. When I try to run the project the next error is displayed : TypeError: _this.onMQTTLost is not a function.

App.js

import MQTTConnection from './src/MQTTConnection'
import React, {
    useEffect
} from 'react'
import {
    View,
    StyleSheet,
    Text,
    Button
} from 'react-native'
import {
    Buffer
} from 'buffer';
global.Buffer = Buffer;

export default function App() {

    useEffect(() => {
        this.mqttConnect = new MQTTConnection()
        this.mqttConnect.onMQTTConnect = this.onMQTTConnect
        this.mqttConnect.onMQTTLost = this.onMQTTLost
        this.mqttConnect.onMQTTMessageArrived = this.onMQTTMessageArrived
        this.mqttConnect.onMQTTMessageDelivered = this.onMQTTMessageDelivered
        onMQTTConnect = () => {
            console.log('App onMQTTConnect')
            this.mqttConnect.subscribeChannel('hanth2')
        }

        onMQTTLost = () => {
            console.log('App onMQTTLost')
        }

        onMQTTMessageArrived = (message) => {
            console.log('App onMQTTMessageArrived: ', message);
            console.log('App onMQTTMessageArrived payloadString: ', message.payloadString);
        }

        onMQTTMessageDelivered = (message) => {
            console.log('App onMQTTMessageDelivered: ', message);
        }
        this.mqttConnect.connect('4924d328ffbe4e649e261db3563eed0a.s2.eu.hivemq.cloud', 8884)



        return () => {
            this.mqttConnect.close()
        }

    }, [])

    return ( <
        View style = {
            styles.container
        } >
        <
        Text > react_native_mqtt < /Text> <
        Button title = "Press me"
        onPress = {
            () => this.mqttConnect.send('hanth2', "message send to channel hanth2 again")
        }
        /> <
        /View>
    )

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    }
})

MQTTConnection.js

import init from 'react_native_mqtt';
import uuid from 'react-native-uuid';
import AsyncStorage from '@react-native-community/async-storage';


init({
    size: 10000,
    storageBackend: AsyncStorage,
    defaultExpires: 1000 * 3600 * 24,
    enableCache: true,
    sync: {},
});

const defaultConnectOptions = {
    reconnect: false,
    cleanSession: true,
    mqttVersion: 3,
    keepAliveInterval: 60,
    timeout: 60,
    userName: 'serjaumen22',
    password: ''


}

export default class MQTTConnection {
    constructor() {
        this.mqtt = null;
        this.QOS = 0;
        this.RETAIN = true;
    }

    connect(host, port, options = null) {
        if (options) {
            this.QOS = options.qos;
            this.RETAIN = options.retain;
        }

        let currentTime = +new Date();
        let clientID = currentTime + uuid.v1();
        clientID = clientID.slice(0, 23);
        console.log('clientID: ', clientID)

        this.mqtt = new Paho.MQTT.Client(host, port, clientID);
        this.mqtt.onConnectionLost = (res) => {
            this.onMQTTLost;
        };
        this.mqtt.onMessageArrived = (message) => {
            this.onMQTTMessageArrived(message);
        };
        this.mqtt.onMessageDelivered = (message) => {
            this.onMQTTMessageDelivered(message);
        };

        const connectOptions = options ? options : defaultConnectOptions;

        this.mqtt.connect({
            onSuccess: this.onMQTTSuccess,
            onFailure: this.onMQTTFailure,
            ...connectOptions
        });
    }

    onMQTTSuccess = () => {
        this.onMQTTConnect()
    }

    onMQTTFailure = () => {
        this.onMQTTLost()
    }

    subscribeChannel(channel) {
        console.log('MQTTConnection subscribeChannel: ', channel)
        if (!this.mqtt || !this.mqtt.isConnected()) {
            return;
        }
        this.mqtt.subscribe(channel, this.QOS);
    }

    unsubscribeChannel(channel) {
        console.log('MQTTConnection unsubscribeChannel: ', channel)
        if (!this.mqtt || !this.mqtt.isConnected()) {
            return;
        }
        this.mqtt.unsubscribe(channel);
    }

    send(channel = null, payload) {
        console.log('MQTTConnection send: ')
        if (!this.mqtt || !this.mqtt.isConnected()) {
            return;
        }

        if (!channel || !payload) {
            return false;
        }
        console.log(`MQTTConnection send publish channel: ${channel}, payload: ${payload} qos: ${this.QOS} retained: ${this.RETAIN}`)
        this.mqtt.publish(channel, payload, this.QOS, this.RETAIN);
    }

    close() {
        this.mqtt && this.mqtt.disconnect();
        this.mqtt = null;
    }

}

MQTTConnection.prototype.onMQTTConnect = null
MQTTConnection.prototype.onMQTTLost = null
MQTTConnection.prototype.onMQTTMessageArrived = null
MQTTConnection.prototype.onMQTTMessageDelivered = null 


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source