reactjs - FlatList 的对象数组数据源在用作 renderItem 时为空

问题描述

这是一个早期问题的扩展，现在已调试以实现它是一个不同的问题。登录到控制台时，我有一个如下所示的对象数组：

我现在想使用这个对象数组来显示一个使用FlatList组件的列表。在我的状态构造函数中，我设置了一个变量，itemList该变量使用从我的listenForMusic函数生成的对象this.setState()：

class VideoFeed extends React.Component {
    constructor(props) {
        super(props);
        //this.dataRef = database.ref("music");
        this.state = {
            itemList: null,
        }
    }

    componentWillMount() {
        this.listenForMusic(); 
    }

    listenForMusic(){
        var dataRef = database.ref("music");
        let items = [];
        dataRef.orderByChild("date").on('child_added', (snap) => {
            items.push({
                videoURL: snap.val().youtubeURL,
                title: snap.val().title,
                thumbnail: snap.val().thumbnail
            });
        });
        this.setState({ itemList: items })
    }

    render() {
        console.log(this.state.itemList);
        return (
            <View>
                <FlatList
                    data={this.state.itemList}
                    renderItem={({item}) => { console.log(item); return (<Text>{item.videoURL}</Text>) }}
                />
            </View>
        );
    }
}

我的渲染函数中有console.log，我看到了我在上面发布的图像，但是当我尝试console.log 时item，renderItem它在控制台中没有显示任何内容（甚至没有空数组）。我提交到data道具中的数据去了哪里？

应该很明显，但该<Text>标签中没有打印任何内容。

编辑：全班添加

class VideoFeed extends React.Component {
    constructor(props) {
        super(props);
        //this.dataRef = database.ref("music");
        this.state = {
            itemList: null,
        }
        //this.listenForMusic = this.listenForMusic.bind(this);
    }

    componentWillMount() {
        this.listenForMusic(); 
    }

    listenForMusic(){
        var dataRef = database.ref("music");
        let items = [];
        dataRef.orderByChild("date").on('child_added', (snap) => {
            items.push({
                videoURL: snap.val().youtubeURL,
                title: snap.val().title,
                thumbnail: snap.val().thumbnail
            });
        });
        this.setState({ itemList: items })
    }

    _keyExtractor = (item, index) => item.id;

    _renderVideoItem = ({item}) => (
            <TouchableWithoutFeedback
                onPress={Actions.Submit}
            >
                <View style={styles.mediaContainer}>
                    <Image 
                        source={{uri: item.thumbnail }}
                        style={styles.mediaThumbnail}
                    />
                    <View style={styles.mediaMetaContainer}>
                        <View style={styles.topMetaContainer}>
                            <Text style={styles.mediaTitle}>
                                {item.title}
                            </Text>
                            <Text style={styles.sharedByUser}>
                            UNCVRD
                            </Text>
                        </View>
                        <View style={styles.bottomMetaContainer}>
                            <Icon
                                name='youtube-play'
                                type='material-community'
                                color='#ff0000'
                                size={16}
                            />
                            <View style={styles.bottomRightContainer}>
                                <Icon
                                    name='thumb-up'
                                    size={12}
                                    color='#aaa'
                                />
                                <Text style={styles.metaLikeCounter}>
                                    16
                                </Text>
                            </View>
                        </View>
                    </View>
                </View>
        </TouchableWithoutFeedback>
    );

    render() {
        console.log(this.state.itemList);
        return (
            <View>
                <FlatList
                    data={this.state.itemList}
                    renderItem={({item}) => { console.log(item); return (<Text>{item.title}</Text>) }}
                />
            </View>
        );
    }
}

编辑2：所以我做了一个有趣的测试，我做了两个状态变量：realList和fakeList：

state = { 
    realList: [],
    fakeList: [],
}

然后，当页面加载时，将运行以下函数来填充名为realand的数组fake。一个从 Firebase 提取数据，另一个用数组信息硬编码：

listenForMusic = () => {
        var dataRef = database.ref("music");
        let real = [];
        let fake = [];
        dataRef.orderByChild("date").on('child_added', (snap) => {
            var url = snap.val().youtubeURL;
            var vidTitle = snap.val().title;
            var thumb = snap.val().thumbnail;
            real.push({
                videoURL: url,
                title: vidTitle,
                thumbnail: thumb
            });
        });
        fake.push({videoURL: "https://youtu.be/AHukwv_VX9A", title: "MISSIO - Everybody Gets High (Audio)", thumbnail: "https://i.ytimg.com/vi/AHukwv_VX9A/hqdefault.jpg"}, {videoURL: "https://youtu.be/G-yWpz0xkWY", title: "SMNM - Million ft. Compulsive", thumbnail: "https://i.ytimg.com/vi/G-yWpz0xkWY/hqdefault.jpg"});
        this.setState({ 
            realList: real,
            fakeList: fake
        });
    }

然后我console.log在渲染函数之后的两个数组，我看到了这个：

并打开两者：

所以我的问题是，为什么“真实”数组看起来是空的，但内部仍然填充了数据，而“假”数组显示它在其中包含两个对象，甚至在我们查看内部之前？

标签： reactjsreact-native

reactjs - FlatList 的对象数组数据源在用作 renderItem 时为空

问题描述

解决方案

推荐阅读