Как исправить ошибку «undefined is not a object» в реакции на нативный

Question

Я пытаюсь переместить свой код приложения, чтобы он был более структурированным.Изначально у меня были все мои функции firebase внутри файла, где я их использовал, но теперь я хотел бы использовать их в нескольких местах, поэтому я создал файл Database.js с классом Database и всемифункции.По какой-то причине, когда я пытаюсь использовать одну из функций из нового класса, я получаю сообщение об ошибке "undefined is not an object (evaluating 'this.codesRef.once')" Пожалуйста, помогите!

До сих пор я пытался использовать функции стрелок, конструктор и импортировать базу данных по-разному, но все безрезультатно.Я в значительной степени озадачен этим.

Посмотрите на код ... (/ 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;

Просто чтобы уточнить, все работало на 100% нормально, пока я не попытался перенести функции в файл Database.js.Любая помощь с благодарностью!

Answer 1

Ваша checkCode функция static.Вы не можете получить доступ к this контексту внутри статических методов.в вашем / project / src / components / Database.js Измените его следующим образом:

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");
            );
          }
    };

При доступе к этой функции внутри / project / src / components / forms / KeyForm.js

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

Остальная часть вашего кода как есть.Приветствия.

Answer 2

Попробуйте использовать конструктор в своем классе:

class Database {
    constructor() {
        this.codesRef = firebase.database().ref("codes");
    }
    //...
}

Answer 3

Может быть, вы должны сделать это так

class Database {
    constructor(props) {
       super(props);
        this.codesRef = firebase.database().ref("codes");
    }
    //...
}