当我运行下面的代码时,它显示 3 个空行。它应该显示两行,每行都有颜色和结束日期,我想使用“Parent”作为unique
键。 “Parent”是 Firebase 在使用“.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 };
最佳答案
这是存储列表的正确方法
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;
关于javascript - React Native Flatlist 返回错误的空行数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46667239/