在来自 firebase 的 flatlist 中设置数据

Question

我是原生反应的新手。我已经通过 firebase 实现了推送通知。现在我只想在平面列表中设置数据，下面是我想要显示数据的事件的图像。我只想显示事件列表。在消息下方。请帮助我设置一个元素，只有我可以设置的其他元素。这是我的代码。

    fetchFriendsList=(eventId)=>{
let allEventsList = [...this.state.allEventsList];
firebase.database().ref('/events').child(eventId).once
('value').then((snapshot) => {
let data = snapshot.val();
let items = Object.values(data);

allEventsList.push(items);
this.setState({allEventsList : allEventsList});
ToastAndroid.show("kk>"+allEventsList.length , 
ToastAndroid.SHORT);
}).then((data)=>{

}).catch((error)=>{
//error callback
console.log('error ' , error)
})   
}

//get event id from user events
deleteOldEvents=()=>{
let eventsList = [...this.state.userEventsList];

for(var i=0;i<eventsList.length;i++){
this.deleteFromFireBase(eventsList[i].eventId)
}
}

//app users remove that not in contacts
deleteFromFireBase=(eventId)=>{
let timeRemaining = 1;

firebase.database().ref('/events').child(eventId).once
('value').then((snapshot) => {
let data = snapshot.val();
let STime = data.sTime;  // start time
let eventDate = data.eventDate;

timeRemaining=this.remainingTimeInMin(STime,eventDate);
}).then((data)=>{
//remove from events
if(timeRemaining < 0){
this.setState({removeEventsList:[]});    



firebase.database().ref('/events').child(eventId).child('friends').once('value').then((snapshot) => {
let data = snapshot.val();
let items = Object.values(data);
this.setState({removeEventsList:items});    
}).then((data)=>{
//remove event data from users node
let removeEventsList = 
[...this.state.removeEventsList];

for(var i=0;i<removeEventsList.length;i++){
let getPhone= removeEventsList[i].phone

firebase.database().ref('/users').child(getPhone).child('/events').child(eventId).remove();
}
//remove whole event from event node

 firebase.database().ref('/events').child(eventId).remove();
 }).catch((error)=>{
 //error callback
 console.log('error ' , error)
 }) 
 }
 }).catch((error)=>{
//error callback
console.log('error ' , error)
})   
}

这是 flatlist 的代码

 <FlatList style={{}} keyboardShouldPersistTaps={'always'}
     data = {this.state.allEventsList}

     ItemSeparatorComponent={this.renderSeparator}
     renderItem = { ({item}) => {
     return(
     <TouchableOpacity onPress={() => this.goToNextScreen(item)}>
     <View style={{flexDirection:'row',paddingBottom:5,paddingTop:5, 
     justifyContent: 'space-between',alignItems: 'center'}}>

      <View style={{flexDirection:'column',justifyContent: 'flex-start'}}>
      <Text style={styles.itemText2CS}>
      <Text style={styles.baseText_titillium_web}>
       {item.groupName}</Text>
       </Text>
       </View>
      <View style={{justifyContent: 'flex-end' ,marginRight:10,textAlignVertical: "center",}}>
      <Image  source = {require("./images/arrow_right.png")} />
      </View>
      </View>
      </TouchableOpacity>
      )}}
       />
       </View>

Answer 1

我认为你的问题在这里：

let items = Object.values(data); // items is an array

allEventsList.push(items);// allEventsList is an array, with allEventsList [0] = items 
this.setState({allEventsList : allEventsList}); // this.state.allEventsList = [[items]]

所以你有一个数组数组。在您的FlatList 中使用将data 设置为数组中的第一个元素，如下所示：

data = {this.state.allEventsList[0]}

让我知道它是否有效，或者如果您有任何其他问题。