React Native Flatlist returns 错误的空行数
React Native Flatlist returns the wrong number of empty rows
当我 运行 下面的代码时,它显示 3 个空行。它应该显示两行,每行都有颜色和结束日期,我想使用 'Parent' 作为 unique
键。 'Parent' 是 Firebase 在使用“.push”将颜色和结束日期推送到 Firebase 时创建的 unique
键。
我试过各种方法让它显示出来。当我制作 'renderItems' return 'this.state.list' 时,我确实得到了要显示的内容,但是 returned 3 行都具有相同的数据,这是最后一个数组的内容在控制台日志上。
我真的很感激一些帮助来使这个工作。
这是代码、Firebase 数据库的副本和 console.log。请注意,Firebase 'goal' 已更改为 'color'。
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 = (item, index) => item.key;
当我 运行 下面的代码时,它显示 3 个空行。它应该显示两行,每行都有颜色和结束日期,我想使用 'Parent' 作为 unique
键。 'Parent' 是 Firebase 在使用“.push”将颜色和结束日期推送到 Firebase 时创建的 unique
键。
我试过各种方法让它显示出来。当我制作 'renderItems' return 'this.state.list' 时,我确实得到了要显示的内容,但是 returned 3 行都具有相同的数据,这是最后一个数组的内容在控制台日志上。
我真的很感激一些帮助来使这个工作。
这是代码、Firebase 数据库的副本和 console.log。请注意,Firebase 'goal' 已更改为 'color'。
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 = (item, index) => item.key;