当我运行下面的代码时,它会显示3个空行。它应该显示两行,每行都有一个颜色和enddate,我想使用' Parent'作为unique
键。父母'是当使用' .push'将颜色和结束日期推送到Firebase时,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 };
&#13;
答案 0 :(得分: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;