在React本机中使用Firebase实时数据库中的数据填充选择项

Question

我正在尝试使用来填充选择器(@react-native-picker/picker)中的项，并且多次失败。

我还附上一个最低限度的可复制的例子如下。

通过onPress事件，console.log()正在打印正确的数组，但是console.log()无法使用它来生成一个数组供Picker使用.

我将非常感谢您提供的任何帮助或资源。

import React, { useState } from 'react';
import { StyleSheet, View, Text, Pressable } from 'react-native';
import { Picker } from '@react-native-picker/picker';
import Firebase from './config/firebase';

const Test = () => {
  const [selectedAnimal, setSelectedAnimal] = useState();

  var generateList = (path) => {
    var Listener = Firebase.database().ref(path);
    return Listener.once('value');
  };

  let pickerGenerator = (dblist) => dblist.map(i => {
    return <Picker.Item key={i} label={i.toString()} value={i} />
  });
  
  return (
    <View style={styles.container}>
      <View style={styles.InputContainer}>
      <Picker
        selectedValue={selectedAnimal}
        style={styles.UserInput}
        onValueChange={(itemValue, itemIndex) =>
          setSelectedAnimal(itemValue)
      }>
        {/* {generateList('/Static/Animals').then(data => {
          pickerGenerator(data.val());
        })} */}
      </Picker>
      </View>
      <Pressable
        style={styles.button}
        android_ripple={{ color: 'white' }}
        onPress={() => {
        generateList('/Static/Animals').then(data => {
          console.log(data.val());
        })
      }}>
      <Text style={styles.buttoncontent}>Test</Text>
      </Pressable>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    marginHorizontal: 8,
  },
  InputContainer: {
    alignSelf: 'stretch',
    marginBottom: 20,
    borderWidth: 1,
    borderStyle: 'solid',
    borderColor: 'darkviolet',
    borderRadius: 4,
  },
  UserInput: {
    fontSize: 16,
    height: 42,
    paddingHorizontal: 8,
  },
  button: {
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 12,
    paddingHorizontal: 32,
    marginVertical: 5,
    borderRadius: 4,
    elevation: 5,
    backgroundColor: 'cornflowerblue',
  },
  buttoncontent: {
    textAlign: 'center',
    fontSize: 16,
    lineHeight: 24,
    fontWeight: 'bold',
    color: 'white',
  },
});

export default Test;

Answer 1

我经过反复试验才使它运转起来。

import React, { useState } from 'react';
import { StyleSheet, View, Text, Pressable } from 'react-native';
import { Picker } from '@react-native-picker/picker';
import Firebase from './config/firebase';

var generated = [];

const Test = () => {
  const [selectedAnimal, setSelectedAnimal] = useState();

  var generateList = (path) => {
    var Listener = Firebase.database().ref(path);
    Listener.once('value', (snapshot) => {
      const data = snapshot.val();
      generated = data;
    });
    return generated;
  };

  let pickerGenerator = (dblist) => dblist.map(i => {
    return <Picker.Item key={i} label={i.toString()} value={i} />
  });
  
  return (
    <View style={styles.container}>
      <View style={styles.InputContainer}>
      <Picker
        selectedValue={selectedAnimal}
        style={styles.UserInput}
        onValueChange={(itemValue, itemIndex) =>
          setSelectedAnimal(itemValue)
      }>
        {pickerGenerator(generateList('/Static/Animals'))}
      </Picker>
      </View>
      <Pressable
        style={styles.button}
        android_ripple={{ color: 'white' }}
        onPress={() => {
          console.log(generateList('/Static/Animals'));
      }}>
      <Text style={styles.buttoncontent}>Test</Text>
      </Pressable>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    marginHorizontal: 8,
  },
  InputContainer: {
    alignSelf: 'stretch',
    marginBottom: 20,
    borderWidth: 1,
    borderStyle: 'solid',
    borderColor: 'darkviolet',
    borderRadius: 4,
  },
  UserInput: {
    fontSize: 16,
    height: 42,
    paddingHorizontal: 8,
  },
  button: {
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 12,
    paddingHorizontal: 32,
    marginVertical: 5,
    borderRadius: 4,
    elevation: 5,
    backgroundColor: 'cornflowerblue',
  },
  buttoncontent: {
    textAlign: 'center',
    fontSize: 16,
    lineHeight: 24,
    fontWeight: 'bold',
    color: 'white',
  },
});

export default Test;