React Native Flatlist 返回错误的空行数答案

【问题标题】：React Native Flatlist returns the wrong number of empty rowsReact Native Flatlist 返回错误的空行数
【发布时间】：2018-03-21 21:22:07
【问题描述】：

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

我已经尝试了各种方法来显示它。当我让“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 };

【问题讨论】：

标签： javascript firebase react-native firebase-realtime-database react-native-flatlist

【解决方案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;

【讨论】：