javascript - 数据未插入 Firebase 数据库

Question

我正在尝试将一条记录从我的 React Native 应用程序插入到 Firebase。我的代码如下:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import * as firebase from 'firebase';

var React = require('react-native');
var {
  Component,
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableHighlight,
  TextInput,
  ListView
} = React;
var Firebase = require('firebase');

export default class App extends React.Component {

  constructor(props) {
    super(props);
    var myFirebaseRef = new Firebase('https://test.firebaseio.com/');

    myFirebaseRef.set({
      title: "Hello World!",
      author: "Simon",
      location: {
        city: "Muenster",
        state: "Germany",
        zip: 48155
      }
    });
  }

  render() {
    return (
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
      </View>
    );
  }
}

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

AppRegistry.registerComponent('devdacticFirebase', () => devdacticFirebase);

但是，当我启动该应用时，记录并未插入到我的 Firebase 中。它也不会向我抛出任何错误消息。为什么会这样呢？我错过了哪一部分？

Answer 1

您正在混合 es5 和 es6 代码。由于您已经导入了 firebase，因此不需要需要它。

引用

在ES5中，如果使用CommonJS标准，通过基本的require引入React包，代码类似这样:

var ReactNative = require("react-native");

var {Image,Text} = ReactNative; 

在 ES6 中，导入措辞更加标准，类似于:

import { Image, Text} from 'react-native'

最近，firebase 更新了其 Web SDK，更改了部分 API。您使用的语法类似于 2.x API，而 latest版本差别很大

应用加载后请初始化firebase(推荐在componentWillMount方法中)，以便您可以在代码中的任何地方使用它

componentWillMount() {
    var config = {
         "apiKey": "YOUR_API_KEY",
         "authDomain": "YOUR_FB_DOMAIN",
         "databaseURL": "YOUR_FIREBASE_URL",
         "projectId": "YOUR_FB_PROJECT_ID"
    }
    firebase.initializeApp(config);
} 

更新

当你将 firebase 设置放入构造函数中时，这很奇怪。我猜你想向 firebase 添加新记录，你可以使用 set 和 push() ，这将添加新记录。假设数据库中有用户表，所以:

import {TouchableOpacity} from 'react-native';

export default class App extends React.Component {

  componentWillMount() {
      var config = {
          apiKey: "...",
          authDomain: "...",
          databaseURL: "...",
          projectId: "...",
          storageBucket: "...",
          messagingSenderId: "..."
        };
      firebase.initializeApp(config);
  } 

  constructor(props) {
    super(props);
  }

  insert = () => {
      firebase.database().ref('user').push().set({
          title: "Hello World!",
          author: "Simon",
          location: "Germany",
          city: "Muenster",
          state: "Germany",
          zip: 48155
      }, (error) => {
          if (error) {
             console.log(error.message);
          } else {
             // Success
          }
      });
  }

  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={()=> this.insert()}>
             <Text>Hello World!</Text>
        </TouchableOpacity>
      </View>
    );
  }
}