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;