[英]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.