Средство выбора в реагировать родной показывает ошибку - PullRequest
Новая
       19

Средство выбора в реагировать родной показывает ошибку

0 голосов
/ 26 февраля 2019

Я пытаюсь получить данные из базы данных Firebase и показать их в средстве выбора.Этот проект извлекает данные из таблицы базы данных firebase с именем category и отображает их в собственном средстве выбора React.Но сборщик показывает ошибку.Я пробовал так много решений, но проблема только ключ или значение будут получены из БД.Я хочу оба

enter image description here

Это моя база данных Firebase Db.И ниже мой код 

import React from 'react';
import { StyleSheet, Text, View, TextInput, Picker } from 'react-native';
import DateTimePicker from 'react-native-modal-datetime-picker';
import moment from 'moment';
import * as firebase from 'firebase';
import {firebaseConfig} from './ApiKeys';
if (!firebase.apps.length) { firebase.initializeApp(firebaseConfig); }
console.ignoredYellowBox = ['Setting a timer',];
var pickerArr = [];
export default class App extends React.Component {
  constructor(props){
    super(props)

    this.state=({ 

      isDateTimePickerVisible: false,
      selecteddate:'Date',
      category:0,
      snapshotList:{},
    })
  }

  componentDidMount() {
    this._loadInitialState();

  }
  _loadInitialState = () => {

  //====================================

  firebase.database().ref('/category').once('value').then((snapshot)=> {
    this.setState({category:snapshot})

    console.log(this.state.category);
  })

  //====================================
    };
    loadUserTypes() {

      var snapshot = this.state.category;
      snapshot.forEach(userSnapshot => {
        var k = userSnapshot.key;
        var name = userSnapshot.val();
        pickerArr.push(<Picker.Item label={userSnapshot.key} value={userSnapshot.val()}/>);
        console.log("k="+ k +" "+"name="+name); //Showing Data correctly

      });
      return pickerArr;
    }


  _showDateTimePicker = () => this.setState({ isDateTimePickerVisible: true });

  _hideDateTimePicker = () => this.setState({ isDateTimePickerVisible: false });

  _handleDatePicked = (pickeddate) => {
    day   = pickeddate.getDate();
    month = pickeddate.getMonth();
    year  = pickeddate.getFullYear();
    console.log('A date has been picked: ' + day + '-' + month + '-' + year);
    exdate= moment(pickeddate).format('HH:mm')
    this.setState({selecteddate : exdate})
    this._hideDateTimePicker();
    console.log("cat "+ this.state.category.val())
  };

  onFocus = () => {
    this._handleDatePicked();
  }

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

        onPress={ () => this._showDateTimePicker() }
        value={this.state.selecteddate}

        >{this.state.selecteddate}</Text>
        {/* //--------------------------------------DateTimePicker */}
        <DateTimePicker
                      isVisible={this.state.isDateTimePickerVisible}
                      onConfirm={this._handleDatePicked}
                      onCancel={this._hideDateTimePicker}
                      mode={'time'}
                      datePickerModeAndroid={'spinner'}


                    />
            {/* //-------------------------------------- */}
            <Picker
              selectedValue={this.state.language}
              style={{height: 50, width: 100}}
              onValueChange={(itemValue, itemIndex) =>
                this.setState({language: itemValue})
              }>

              {/* -------------------Dynamic Picker Data------------------ */}
              <Picker.Item label='Salle de sport' value='default'/>
              {this.loadUserTypes()}
              {/* -------------------------------------------------------- */}
            </Picker>
      </View>
    );
  }
}

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