React Native中的FlatList正在呈现但不显示文本

Question

I'm trying to render a flatlist by connecting to a internal JSON file. The flatlist seems to be rendering but not showing any text. The cardlist in the code is being rendered 9 times, there are 9 objects in the JSON file. But no text is showing.

// libraryList.js

    import React, { Component } from 'react';
    import { FlatList } from 'react-native';
    import { connect } from 'react-redux';
    import ListItem from './ListItem';

    class LibraryList extends Component {
      renderItem(library) {
          return <ListItem library={library} />;
      }

      render() {
      //  console.log(this.props);
      //  return;
    return (
          <FlatList
          data={this.props.libraries}
          renderItem={this.renderItem}
          keyExtractor={library => library.id}
          />
        );
      }
    }

    const mapStateToProps = state => {
        return { libraries: state.libraries };
      };

    export default connect(mapStateToProps)(LibraryList);

// ListItem.js

    import React, { Component } from 'react';
    import { Text } from 'react-native';
    import { CardSection } from './common';

    class ListItem extends Component {
      render() {
        return (
          <CardSection>
            <Text>{this.props.library.title}</Text>
            </CardSection>
        );
      }
    }

    export default ListItem;
    import React, { Component } from 'react';
    import { Text } from 'react-native';
    import { CardSection } from './common';

    class ListItem extends Component {
      render() {
        return (
          <CardSection>
            <Text>{this.props.library.title}</Text>
            </CardSection>
        );
      }
    }

    export default ListItem;

Just want to list the title at this stage.

Answer 1

You need to modify renderItem because FlatList passes an object into the renderItem callback function.

Instead, use the below

renderItem = ({ item }) => <ListItem library={item} />

Answer 2

Thanks Dan you put me onto the right lines. I used

renderItem={({ item }) => this.renderItem(item)}