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')}
/>