web-dev-qa-db-ja.com

FlatListが表示されないのはなぜですか？

この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
4
dbarks

キーエクストラクタが主な問題でした

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

FlatListも表示されず、keyExtractorは問題ありませんでした

に置き換えてみました

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

そして、2番目の行が最初の行をオーバーライドしていることに気付いたとき、リストに十分なスペースがないことに気付いたので、それをScrollViewでラップしました。

import ScrollView from 'react-native'
0
Oranit Dar