从 firebase 获取数据后刷新选择器项目

Posted 2023-02-22

【中文标题】从 firebase 获取数据后刷新选择器项目

【英文标题】：Refreshing picker items after fetching data from firebase

【发布时间】：2019-05-12 13:59:43

【问题描述】：

我最近开始在 React Native 上学习开发，我遇到了一个问题，我目前正在使用 firebase 为应用程序编写注册系统，我希望用户使用选择器选择运动室和所有可供选择的运动室都是从 firebase 数据库中获取的。

我的代码如下：

getPickerElements() 
    var sportsRoomRef = firebase.database().ref('/sportsRoomList');
    var snapshotList = new Object();
    var pickerArr = [];

    sportsRoomRef.once('value').then(snapshot => 
        snapshotList = snapshot.val();
        for (var key in snapshotList) 
            pickerArr.push(<Picker.Item label=snapshotList[key] value=snapshotList[key]/>);
        
    )
    return (pickerArr);

这是我认为的选择器：

<Picker
    selectedValue=this.state.pickerSelection
    style=[width: 290, height: 50, color: 'black', pickerStyle]
    onValueChange=(itemValue) => this.setState(pickerSelection: itemValue)>
    <Picker.Item label='Salle de sport' value='default'/>
    getPickerElements()
</Picker>

我的问题是，当返回时，pickerArr 不包含任何内容，因为根据我的阅读 .then() 是异步的，但不可能在 .then() 中使用 return。

我已经被这个问题困扰了很长一段时间，现在尝试不同的东西，但由于我对 React Native 缺乏了解，我仍然没有找到解决方案。

我已经记录了 snapshotList 的内容，我可以肯定地说，数据已从数据库中正确获取，但我无法让选择器显示它。我该如何解决这个问题？

【参考方案1】：

将列表放入您的状态并将其与您的选择器连接。您可以在我的存储库中找到一个示例：

https://snack.expo.io/@mukeyii/cGlja2

【参考方案2】：

决定你想用哪些数据来代表你的观点；这就是状态。在您的情况下，它可能是例如快照或快照列表。决定何时获取该数据。构造函数是一种选择。

constructor() 
    this.state = 
        snapshotList: new Object()
        // and whatever else
    
    this.getSnapshotList.bind(this);
    this.getSnapshotList();

使用 setState 将该数据存储在您的状态中。

getSnapshotList() 
    var sportsRoomRef = firebase.database().ref('/sportsRoomList');
    var snapshotList;

    sportsRoomRef.once('value').then(snapshot => 
        snapshotList = snapshot.val();
        this.setState( snapshotList );
    )

然后在渲染期间从该状态派生您当前的 getPickerElements。

render() 
    const  snapshotList  = this.state;
    var pickerArr = [];

    for (var key in snapshotList) 
        pickerArr.push(<Picker.Item label=snapshotList[key] value=snapshotList[key]/>);
    

    <Picker
        selectedValue=this.state.pickerSelection
        style=[width: 290, height: 50, color: 'black', pickerStyle]
        onValueChange=(itemValue) => this.setState(pickerSelection: itemValue)>
        <Picker.Item label='Salle de sport' value='default'/>
        pickerArr
    </Picker>

【参考方案3】：

解决此问题的一种方法是将数据获取和呈现分离。

更具体地说，将 snapshotList 置于组件状态并在组件挂载时触发数据获取。这样，组件最初不会显示任何内容，但一旦加载数据，它就会重新渲染并显示选择器项。

类似的东西，但如果不查看更多代码就无法确定：

constructor() 
  this.state = 
    snapshotList: ,
  ;
  this.getPickerElements = this.getPickerElements.bind(this);


componentDidMount() 
    var sportsRoomRef = firebase.database().ref('/sportsRoomList');

    sportsRoomRef.once('value').then(snapshot => 
        var snapshotList = snapshot.val();
        this.setState(snapshotList);
    )


getPickerElements() 
    var pickerArr = [];
    var snapshotList = this.state.snapshotList;
    for (var key in snapshotList) 
        pickerArr.push(<Picker.Item label=snapshotList[key] value=snapshotList[key]/>);
    
    return pickerArr;