react-native - 为什么我的 FlatList 没有显示？

Question

我正在尝试加载此 FlatList，但它没有在屏幕上显示任何内容，也没有出现错误。品种 console.log 正在记录一个带有 $t 键的对象数组。

import React, { Component } from 'react';
import { FlatList, Text, View } from 'react-native';
import { connect } from 'react-redux';
import { Container, Content } from 'native-base';
// import BreedListItem from './BreedListItem';

class BreedList extends Component {
    render() {
        console.log(this.props.breeds.breed);
        return (
            <Container>
                <Content>
                    <FlatList 
                    style={{ flex: 1 }}
                    dataSource={this.props.breeds.breed}
                    renderItem={(breed) => {
                        console.log(breed.$t);
                        return (
                        <View><Text>{breed.$t}</Text></View>
                    );
                }
                }
                    keyExtractor={(breed) => `${breed.$t}`}
                    />
                </Content>
            </Container>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        breeds: state.breeds.breeds
    };
};

export default connect(mapStateToProps)(BreedList);

this.props.breeds.breed 的控制台日志如下。

(37) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0
:
{$t: "Affenpinscher"}
1
:
{$t: "Afghan Hound"}
2
:
{$t: "Airedale Terrier"}
...

标签： react-nativereact-native-flatlist

Answer 1

如果您忘记从 renderItem 函数返回某些内容，也会发生这种情况。例如：

renderItem = (row, sectID, rowID) => {
   <View style={{flexDirection: 'row'}}>
     <Text>{row.item}</Text>
   </View>;
};

如您所见，缺少 return 语句，但这不会触发错误、警告或任何事情——您只会得到一个空白的 Flatlist。