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

【问题标题】：React Native component rendering twice yet renderItem does not update values?React Native 组件渲染两次但 renderItem 不更新值？
【发布时间】：2018-02-08 02:29:12
【问题描述】：

我试图在屏幕上填充自定义组件的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({
});

【问题讨论】：

那么您面临的真正问题是什么？
<EventCard> 组件的所有元素都没有出现，即title 的空字符串。我将编辑我的 Q 以更具体地解决我的问题
我认为renderItem函数是错误的
有可能，我尝试按照 React Native 文档进行操作，但我对 FlatList 和 renderItem 之间的交互的理解并不是 100% 有信心。

标签： javascript firebase react-native

【解决方案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>

【讨论】：

总是最简单的事情...谢谢。
我很确定我们都去过那里。

【解决方案2】：

你以错误的方式包装参数

你应该试试这个：

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

【讨论】：