Javascript React Native Flatlist返回错误数量的空行

当我运行下面的代码时，它显示3个空行。它应该显示两行，每行有一个颜色和结束日期，我想使用“父”作为唯一键。“父项”是Firebase在使用“.push”将颜色和结束日期推送到Firebase时创建的唯一键

我试过各种方法来展示它。当我让“renderItems”返回“this.state.list”时，我确实得到了要显示的内容，但返回的3行数据都相同，这是控制台日志上最后一个数组的内容

我真的很想得到一些帮助，让这个工作

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

从“React”导入React，{Component}； 从“react native”导入{Text，FlatList，View，Image}； 从“firebase”导入firebase； 从“../common”导入{Button，Card，CardSection}； 从“../styles”导入样式； 类列表扩展组件{ 静态导航选项={ 标题：“列表”， } 构造器{ 超级作物； 此.state={ 名单：[]， }; } 组件安装{ const{currentUser}=firebase.auth； const Parent=firebase.database.ref`/users/${currentUser.uid}/Profile`； 在'child_added'上，快照=>{ this.setState{list:[snapshot.key，snapshot.val.color，snapshot.val.enddate]}； console.logthis.state.list； }; } keyExtractor=项，索引=>索引； 渲染{ 回来 {item.color} {item.enddate} } /> this.props.navigation.navigate'NextPage'，{name:'user'} title=转到下一页 > 转到下一页 ; } }

---

导出{List} 这是存储列表的正确方法

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 = (item, index) => item.key;