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

之外的所有道具

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

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

2 个答案: