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);

Answer 3

我的FlatList也没有显示，并且keyExtractor很好

我尝试将其替换为

<View><Text>something1</Text></View>
<View><Text>something2</Text></View>

当我注意到第二行覆盖了第一行时，我意识到该列表没有足够的空间，因此我用 ScrollView

进行了包装

import ScrollView from 'react-native'

为什么我的FlatList不显示？

3 个答案: