Firebase.push失败：第一个参数包含无效键（$$ typeof）

Question

我正在学习第一次开发Android应用而不是IOS的本地反应，我正在学习使用来自youtube的React Native和Firebase构建简单的ToDo应用程序教程。但是我得到了一个尝试添加项目时出错。我收到以下错误

Firebase.push失败：第一个参数在属性'restaurant.restaurant_name.targetInst._nativeParent._currentElement'中包含无效键（$$ typeof）.keys必须是非空字符串且不能包含“。”， “＃”， “$”， “/”， “[”

可能会造成这个问题？

import React, { Component } from 'react';

import Firebase from 'firebase';

import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableHighlight,
  TextInput,
  ListView
} from 'react-native';

class foodOrderSystem extends Component {
  constructor(props){
    super(props);
    const firebaseRef = new Firebase('foodordersystem.firebaseio.com');
    console.log(firebaseRef);
    this.itemRef = firebaseRef.child('restaurant');
    this.state = {
        newRestaurant:'',
        // estimated_delivery:'',
        // description:'',
        restaurantSource: new ListView.DataSource({rowHasChanged: (row1,row2) => row1 !== row2})
    };
    this.restaurant = [ ];
  }

  componentDidMount() {
    this.itemRef.on('child_added', (snap) => {
        this.restaurant.push({
            id:snap.key(),
            text:snap.val()
        });
        this.setState({
            restaurantSource:this.state.restaurantSource.cloneWithRows(this.restaurant)
        });
    });

    this.itemRef.on('child_removed', (snap) => {
        this.restaurant = this.restaurant.filter((x) => x.id !== snap.key());
        this.setState({
            restaurantSource:this.state.restaurantSource.cloneWithRows(this.restaurant)
        });
    });

  }

  addRestaurant(){
    if(this.state.newRestaurant !== ''){
        this.itemRef.push({
            restaurant_name: this.state.newRestaurant
        });
        this.setState({ newRestaurant:''});
    }
  }

  removeRestaurant(rowData){
    this.itemRef.child(rowData.id).remove();
  }

  render() {
    return (
      <View style={styles.appContainer}>
        <View style={styles.titleView}>
            <Text style={styles.titleText}>
              foodOrderSystem
            </Text>
        </View>
        <View style={styles.inputcontainer}>
            <TextInput 
                style={styles.input} 
                onChange={(text) => this.setState({newRestaurant:text})}
                value={this.state.newRestaurant} />
                <TouchableHighlight
                    style={styles.button}
                    onPress={ () => this.addRestaurant() }
                    underlayColor="#00ffff">
                    <Text style={styles.btnText}>Add</Text>
                </TouchableHighlight>
        </View>
        <ListView
            dataSource={this.state.restaurantSource}
            renderRow={this.renderRow.bind(this)} />
      </View>
    );
  }

  renderRow(rowData){
    return(
        <TouchableHighlight
            underlayColor="#dddddd"
            onPress={() => this.removeRestaurant(rowData)}>
            <View>
                <View style={styles.row}>
                    <Text style={styles.todoText}>{rowData.text}</Text>
                </View>
                <View style={styles.separator} />
            </View>
        </TouchableHighlight>
    );
}
}

const styles = StyleSheet.create({
  appContainer:{
    flex: 1
  },
  titleView:{
    backgroundColor: '#48afdb',
    paddingTop: 30,
    paddingBottom: 10,
    flexDirection: 'row'
  },
  titleText:{
    color: '#fff',
    textAlign: 'center',
    fontWeight: 'bold',
    flex: 1,
    fontSize: 20,
  },
  inputcontainer: {
    marginTop: 5,
    padding: 10,
    flexDirection: 'row'
  },
  button: {
    height: 36,
    flex: 2,
    flexDirection: 'row',
    backgroundColor: '#48afdb',
    justifyContent: 'center',
    color: '#FFFFFF',
    borderRadius: 4,
  },
  btnText: {
    fontSize: 18,
    color: '#fff',
    marginTop: 6,
  },
  input: {
    height: 36,
    padding: 4,
    marginRight: 5,
    flex: 4,
    fontSize: 18,
    borderWidth: 1,
    borderColor: '#48afdb',
    borderRadius: 4,
    color: '#48BBEC'
  },
  row: {
    flexDirection: 'row',
    padding: 12,
    height: 44
  },
  separator: {
    height: 1,
    backgroundColor: '#CCCCCC',
  },
  todoText: {
    flex: 1,
  },
});

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

以下是错误附件