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!
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.
Comments