React Native组件渲染两次，但是renderItem不会更新值吗？

Question

我试图填充FlatList定制组件（的<EventCard>在画面上），然而，没有组分的元件被显示出来。 例如：我组件中的title为空白，而不是终端输出中所示的“ Test Event”。

在componentWillMount()内部，我查询数据库以填充一个数组，然后在renderItem使用该数组填充FlatList

终端输出显示了一个带有空数组的初始render() ，然后是带有数据的第二个render() 。

我的猜测是组件正在尝试从空数组中拉出，从而导致它们为空。 不过，我很困惑，因为正在记录对render()的第二次调用，那么该组件也不会再次呈现吗？ 与完整的阵列？

经过一些研究，我想我可能需要调用forceUpdate()或类似的东西来从数组中获取更新的数据。 我也尝试过与componentWillReceiveProps()搞混，但是我也无法正常工作（ Source ）。 老实说，我不确定我是否使用renderItem ，这可能会导致我的问题。

我没有包含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: ]

相关文件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({
});

Answer 1

我认为您的问题出在您的renderItem函数上。 具体来说，您在EventCard之外拥有所有道具

<EventCard>
    title={item.title}
    date={item.date}
    location={item.location}
    rsvp={item.volunteersHave}
    time={item.time}
    onPress={() => navigate('EventPage')}
</EventCard>

应该

<EventCard
    title={item.title}
    date={item.date}
    location={item.location}
    rsvp={item.volunteersHave}
    time={item.time}
    onPress={() => navigate('EventPage')}> 
</EventCard>

Answer 2

您用错误的方式包装参数

您应该尝试这样：

<EventCard
    title={item.title}
    date={item.date}
    location={item.location}
    rsvp={item.volunteersHave}
    time={item.time}
    onPress={() => navigate('EventPage')}
/>