我最近才开始在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。 / p>
我已经在这个问题上停留了很长时间了,现在尝试其他的事情,但是由于我对React Native缺乏了解,我仍然没有找到解决方案。
我已经记录了 snapshotList 的内容,可以肯定地说是从数据库中正确获取了数据,但是我无法让选择器显示它。我该如何解决?
答案 0 :(得分: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;
}
答案 1 :(得分:1)
确定要代表视图的数据;这是状态。在您的情况下,可能是例如snapshot或snapshotList。决定何时获取该数据。构造函数是一种选择。
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>
答案 2 :(得分:1)
将列表置于您的状态,并将其与选择器连接。您可以在我的存储库中找到一个示例: