javascript - React Native 组件渲染两次但 renderItem 不更新值？

Question

我正在尝试填充 FlatList屏幕上的自定义组件 (<EventCard>)，但是，组件的所有元素都没有显示。例如:title在我的组件中是空白的，而不是终端输出中显示的“测试事件”。

内部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

之外的所有 Prop

<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>