[英]React Native component rendering twice yet renderItem does not update values?
I am attempting to populate a FlatList
of custom components ( <EventCard>
) on a screen, however, none of the elements of the components are showing up. 我试图填充
FlatList
定制组件(的<EventCard>
在画面上),然而,没有组分的元件被显示出来。 Ex: The title
in my component is blank, rather than "Test Event" as shown in the terminal output. 例如:我组件中的
title
为空白,而不是终端输出中所示的“ Test Event”。
Inside componentWillMount()
I query my database to populate an array which is then used in renderItem
to populate the FlatList
在
componentWillMount()
内部,我查询数据库以填充一个数组,然后在renderItem
使用该数组填充FlatList
Terminal output shows an initial render()
with an empty array and then a second render()
with the data. 终端输出显示了一个带有空数组的初始
render()
,然后是带有数据的第二个render()
。
My guess is that the components are trying to pull from the empty array, thus causing them to be empty. 我的猜测是组件正在尝试从空数组中拉出,从而导致它们为空。 I am confused though because a second call to
render()
is being logged, so won't the component be rendered again as well? 不过,我很困惑,因为正在记录对
render()
的第二次调用,那么该组件也不会再次呈现吗? with the full array? 与完整的阵列?
After doing some research, I think I may need to call forceUpdate()
or something similar to grab the updated data from the array. 经过一些研究,我想我可能需要调用
forceUpdate()
或类似的东西来从数组中获取更新的数据。 I have also tried messing around with componentWillReceiveProps()
but I can't get that working either ( Source ). 我也尝试过与
componentWillReceiveProps()
搞混,但是我也无法正常工作( Source )。 To be honest, I am not certain on my use of renderItem
, this could be contributing to my problem. 老实说,我不确定我是否使用
renderItem
,这可能会导致我的问题。
I haven't included EventCard.js
as I am quite certain it is not the source of the error but I can upon request. 我没有包含
EventCard.js
因为我可以肯定它不是错误的根源,但我可以应要求提供。
18:00:16: RENDER
18:00:16: Array []
18:00:17: RENDER
18:00:17: Array [
18:00:17: Object {
18:00:17: "date": "Fri Dec 07 2018",
18:00:17: "host": "Test host",
18:00:17: "key": "-L4mE_YKKbrvaMVNaA2T",
18:00:17: "location": "",
18:00:17: "time": "08:30",
18:00:17: "title": "Test event",
18:00:17: "volunteersHave": 1,
18:00:17: "volunteersNeed": "20",
18:00:17: },
18:00:17: ]
The relevant file, Dashboard.js 相关文件Dashboard.js
import React from 'react';
import { Button, FlatList, StyleSheet, Text, View} from 'react-native';
import { Icon } from 'react-native-elements';
import EventCard from './EventCard';
import * as firebase from 'firebase';
export default class Dashboard extends React.Component {
constructor(props){
super(props)
this.state = {
eventArr: [],
}
}
componentWillMount = () => {
var tempArr = [];
firebase.database().ref('/events/').once('value').then((snapshot) => {
tempArr = this.snapshotToArray(snapshot);
this.setState({
eventArr: tempArr
});
});
}
snapshotToArray = snapshot => {
var retArr = [];
snapshot.forEach(childSnapshot => {
var item = childSnapshot.val();
item.key = childSnapshot.key;
retArr.push(item);
});
return retArr;
};
render(){
console.log('RENDER')
console.log(this.state.eventArr)
return (
<View>
<FlatList
data={this.state.eventArr}
renderItem={({item}) =>
<EventCard>
title={item.title}
date={item.date}
location={item.location}
rsvp={item.volunteersHave}
time={item.time}
onPress={() => navigate('EventPage')}
</EventCard>}
/>
</View>
);
}
}
//styles omitted
const styles = StyleSheet.create({
});
I think your problem is with your renderItem function. 我认为您的问题出在您的renderItem函数上。 Specifically, you have all your props outside of the
EventCard
具体来说,您在
EventCard
之外拥有所有道具
<EventCard>
title={item.title}
date={item.date}
location={item.location}
rsvp={item.volunteersHave}
time={item.time}
onPress={() => navigate('EventPage')}
</EventCard>
Should be 应该
<EventCard
title={item.title}
date={item.date}
location={item.location}
rsvp={item.volunteersHave}
time={item.time}
onPress={() => navigate('EventPage')}>
</EventCard>
You are wrapping the parameters in wrong way 您用错误的方式包装参数
You should try this: 您应该尝试这样:
<EventCard
title={item.title}
date={item.date}
location={item.location}
rsvp={item.volunteersHave}
time={item.time}
onPress={() => navigate('EventPage')}
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.