How to fix 'undefined is not an object' error in react native

Michael Hoefler

I am attempting to move my react-native app code to be in a more structured manner. Originally, I had all of my firebase functions inside the file where I used them, but now I would like to use them in multiple places, so I created a Database.js file with a Database class and all of the functions. For some reason though, whenever I try to use one of the functions from the new class, I get the error "undefined is not an object (evaluating 'this.codesRef.once')" Please help!

So far, I have tried using arrow functions, a constructor, and importing firebase in different ways, all to no avail. I am pretty much stumped on this one.

Have a look at the code... (/project/src/components/forms/KeyForm.js)

import React from 'react';
import { StyleSheet, View, TextInput } from 'react-native';

import db from '../Database.js';

class LoginForm extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <View style={styles.container}>
        <TextInput
          placeholder="Access Code"
          returnKeyType="go"
          onSubmitEditing={text => {db.checkCode(text.nativeEvent.text)}}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({ // stylesheet
  // yay styles :)
});

export default LoginForm;

(/project/src/components/Database.js)

//import * as firebase from "firebase";
var firebase = require('firebase');

if (!firebase.apps.length) {
    firebase.initializeApp({
        apiKey: "key",
        authDomain: "domain",
        databaseURL: "url",
        storageBucket: "bucket",
    });
}

class Database {

    codesRef = firebase.database().ref('codes');

    static checkCode(text) {
        let codeIsFound = false;
        this.codesRef.once('value', (db_snapshot) => { // this won't work
          db_snapshot.forEach((code_snapshot) => {
            if (text == code_snapshot.val().value) {
              codeIsFound = true;
              identifier = code_snapshot.key;
            }
          });
        });
        if (codeIsFound) {
            //this.deleteCode(identifier);
            console.log("code found");
            this.props.navigation.navigate('Create'); // side-question => how can i get this working in Database.js? Do i need to use withNavigation?
          } else {
            console.log("code not found");
            );
          }
    };
}

module.exports = Database;

Just to clarify, everything worked 100% fine until i tried to migrate the functions to the Database.js file. Any help is greatly appreciated!

Nishant Nair

Your checkCode function is static. You cannot access this context inside static methods. in your /project/src/components/Database.js Change it like this:

checkCode(text) {
        let codeIsFound = false;
        this.codesRef.once('value', (db_snapshot) => { // this won't work
          db_snapshot.forEach((code_snapshot) => {
            if (text == code_snapshot.val().value) {
              codeIsFound = true;
              identifier = code_snapshot.key;
            }
          });
        });
        if (codeIsFound) {
            //this.deleteCode(identifier);
            console.log("code found");
            this.props.navigation.navigate('Create'); // side-question => how can i get this working in Database.js? Do i need to use withNavigation?
          } else {
            console.log("code not found");
            );
          }
    };

When accessing this function inside /project/src/components/forms/KeyForm.js

import firbaseDB from '../Database.js';
const db = new firbaseDB();
...

Rest of your code as it is. Cheers.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How to fix undefined is not an object on setState in react native

How to fix React Native Flow Throw Error is Missing Null or Undefined

Error undefined is not an object React Native

How to fix the error object is possibly null or undefined using react and typescript?

Type Error: undefined is not an object React-Native

React Native rowID giving error undefined is not an object

React Native get undefined is not an object error

Getting type error undefined object in react native?

React Native with API, Error: undefined is not an object

How to fix Typescript error "Object is possibly 'undefined'"

How to fix "undefined is not object" in this case "movieItem.poster_path" using ListItem native-base inside Flatlist react-native?

How to fix ReactNavigation Error in react native

“How to fix ‘handlePress’ error in react-native”

how to fix ';' expected error in React-Native

How to fix 'Type Error: Cannot Read Property 'name' of undefined when trying to access properties of an object' in React

React native: Undefined is not an object

undefined is not object React Native

Undefined is not an object [React Native]

How to fix read property 'showimagepicker' of undefined React-Native with Expo

How to fix Error: object is not valid as React child

React Native - play animation backwards with useRef? Error - 'undefined is not an object?'

Getting "Undefined is not an object (evaluating StyleSheet.create)" error in React Native

Getting an undefined object error in react native while using state?

"'Undefined is not an object (evaluating 'row[0].val')" error in react native

How to fix error React Native 'UMCore' build error in Xcode

How to fix TypeSrcipt error "Object is possibly 'undefined' " with virtual mongoose attribute

How to fix this TSLint (Object is possibly 'undefined') error for firestore

How to fix the error argument of type boolean or undefined using react and typescript?

React Native fetch: Undefined is not an object