React Native Flatlist返回错误的空行数

Question

当我运行下面的代码时，它显示3个空行。它应该显示两行，每行都有一个颜色和enddate，我想使用'Parent'作为unique键。 'Parent'是由Firebase创建的unique密钥，当颜色和结束日期以'.push'推送到Firebase时。

我试过各种各样的东西来让它显示。当我将'renderItems'返回'this.state.list'时，我确实得到了显示的内容，但是它返回了3行全部相同的数据，这是控制台日志中最后一个数组的内容。

我真的很感谢一些帮助，让这个工作。

以下是代码，Firebase数据库和console.log的副本。请注意，Firebase的“目标”已更改为“颜色”。

import React, { Component } from 'react'; 
 
import { Text, FlatList, View, Image } from 'react-native'; 
 
import firebase from 'firebase'; 
 
import { Button, Card, CardSection } from '../common'; 
 
import styles from '../Styles'; 
 

 
class List extends Component { 
 

 
    static navigationOptions = { 
 
    title: 'List', 
 
    } 
 

 
    constructor(props) { 
 
    super(props); 
 

 
    this.state = { 
 
     list: [], 
 
    }; 
 
    } 
 

 
componentDidMount() { 
 
    const { currentUser } = firebase.auth(); 
 
    const Parent = firebase.database().ref(`/users/${currentUser.uid}/Profile`); 
 

 
    Parent.on(('child_added'), snapshot => { 
 
     this.setState({ list: [snapshot.key, snapshot.val().color, snapshot.val().enddate] }); 
 

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

 
keyExtractor = (item, index) => index; 
 

 
render() { 
 
    return (
 
    <Card> 
 
     <View style={{ flex: 1 }}> 
 
     <FlatList 
 
      data={this.state.list} 
 
      keyExtractor={this.keyExtractor} 
 
      extraData={this.state} 
 
      renderItem={({ item }) => (
 
      <Text style={styles.listStyle}> 
 
       { item.color } 
 
       { item.enddate } 
 
      </Text> 
 
     )} 
 
     /> 
 
     </View> 
 

 
     <CardSection> 
 
     <Button 
 
      style={{ 
 
      flex: 1, 
 
      flexDirection: 'row' 
 
      }} 
 

 
      onPress={() => this.props.navigation.navigate('NextPage', { name: 'user' })} 
 
      title="Go to next page" 
 
     > 
 
      Go to next page 
 
     </Button> 
 
     </CardSection> 
 
    </Card> 
 
    ); 
 
    } 
 
} 
 

 
export { List };

Answer 1

这是存储列表

componentDidMount() { 
    const { currentUser } = firebase.auth(); 
    const Parent = firebase.database().ref(`/users/${currentUser.uid}/Profile`); 

    Parent.on(('child_added'), snapshot => { 
     const newChild = { 
      key: snapshot.key, 
      color: snapshot.val().color, 
      enddate: snapshot.val().enddate 
     } 
     this.setState((prevState) => ({ list: [...prevState.list, newChild] })); 

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

和你keyExtractor正确的方法

keyExtractor = (item, index) => item.key;