reactjs - react native 中的 FlatList 正在渲染但不显示文本
问题描述
我正在尝试通过连接到内部 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} />
推荐阅读
- angular - 如何找到我附近的其他用户?
- javascript - 一个循环但有选择性的数字
- python-3.x - 如何更改日期时间索引中的日期
- node.js - 如何为不可用事件选择 HTTP 状态码
- c# - 用户登录应用程序后集成授权(例如:facebook)
- reactjs - 我可以在 useEffect 中调用单独的函数吗?
- r - 在R中,从两组点中找到非线性线,然后找到这些点的交点
- node.js - 为什么我的快速会话变量在不同的路线上返回“未定义”?
- r - 在 R Shiny 中调用 tabPanel 时如何使用 lapply 或其他高阶函数
- html - 为什么我的每个循环在放入 mixin 时都不起作用?