为什么我的 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"}
...

Answer 1

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

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

正如您所看到的，缺少 return 语句，但这不会触发错误、警告或任何内容 - 您只会得到一个空白的 Flatlist。

Answer 2

密钥提取器是主要问题

import React, { Component } from 'react';
import { FlatList, Text } 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);
        return (
            <Container>
                <Content>
                    <FlatList 
                    data={this.props.breeds}
                    renderItem={({ item }) => <Text>{item.$t}</Text>}
                    keyExtractor={item => item.$t}
                    />
                </Content>
            </Container>
        );
    }
}

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

export default connect(mapStateToProps)(BreedList);