繁体   English   中英

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

[英]FlatList in react native is rendering but not showing text

我正在尝试通过连接到内部JSON文件来呈现清单。 单位列表似乎正在呈现,但未显示任何文本。 代码中的卡片清单被渲染9次,JSON文件中有9个对象。 但是没有文字显示。

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

只想在此阶段列出标题。

您需要修改renderItem因为FlatList将对象传递到renderItem回调函数中。

而是使用以下内容

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

谢谢丹,您把我放在正确的位置上。 我用了

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM