reactjs - React Native 列表视图不显示数据
问题描述
我正在开发一个简单的 React Native iOS 应用程序来学习 React Native,这是我的第一个 React Native 应用程序。现在,我正在练习使用 ListView。但似乎项目已加载到列表视图中,但未显示数据。
这是我的减速机
import * as AlbumListActions from '../actions/AlbumListActions';
const defaultState = {
albums: [ ],
loading: false,
message: null
}
export default albumListReducer = (state = defaultState, action) => {
switch (action.type) {
case AlbumListActions.ALBUMS_START_FETCHING_ALBUMS:
return { ...state, loading: true, albums: [ ] }
break;
case AlbumListActions.ALBUMS_COMPLETE_FETCHING_ALBUMS:
return { ...state, loading: false, albums: action.payload }
break;
case AlbumListActions.ALBUMS_CATCH_FETCHING_ALBUMS:
return { ...state, loading: false, message: action.payload }
break;
default:
return { ...state };
}
}
这是我的行动
import Axios from 'axios';
export const ALBUMS_START_FETCHING_ALBUMS = "(albums) start fetching albums";
export const ALBUMS_COMPLETE_FETCHING_ALBUMS = "(albums) complete fetching albums";
export const ALBUMS_CATCH_FETCHING_ALBUMS = "(albums) catch fetching albums";
export const completeFetchingAlbums = (data) => {
return {
type: ALBUMS_COMPLETE_FETCHING_ALBUMS,
payload: data
}
}
export const catchFetchingAlbums = (data) => {
return {
type : ALBUMS_CATCH_FETCHING_ALBUMS,
payload: data
}
}
export const fetchAlbums = (data) => {
return (dispatch) => {
dispatch({
type: ALBUMS_START_FETCHING_ALBUMS
});
return Axios.get("http://rallycoding.herokuapp.com/api/music_albums").then((response) => {
dispatch(completeFetchingAlbums(response.data));
}).catch((error) => {
dispatch(catchFetchingAlbums("Unable to fetch data from the server"));
})
}
}
这是我的组件渲染列表视图。
class AlbumList extends React.Component {
componentWillMount() {
this.props.fetchAlbums();
}
renderAlbumItem = (album) => {
return (
<View style={styles.container}>
<Text>{album.title}</Text>
</View>
)
}
render() {
return (
<View>
<FlatList
data={this.props.albums}
renderItem={this.renderAlbumItem}
keyExtractor={(album) => album.title}
/>
</View>
)
}
}
const mapStateToProps = state => {
return state.albumList;
}
const mapDispatchToProps = (dispatch, ownProps) => {
return bindActionCreators({
fetchAlbums : AlbumListActions.fetchAlbums
}, dispatch)
}
export default connect(mapStateToProps, mapDispatchToProps)(AlbumList);
当我运行我的应用程序时,它没有显示任何内容。出了什么问题,我该如何解决?
解决方案
的签名renderItem
是错误的。它接受一个对象,该对象的属性之一是item
保存您要渲染的专辑。
所以要让它工作,改变renderItem
如下:
renderAlbumItem({item}) => {
return (
<View style={styles.container}>
<Text>{item.title}</Text>
</View>
)
}
您也可以重命名item
为album
- renderAlbumItem({item: album})
。这种语法称为对象解构,你可以谷歌解释。在这种情况下{album.title}
,用于访问标题。
推荐阅读
- github - 如何查看我将存储库设为私有的日期?
- javascript - 访问异步函数之外的变量时的 JS 安全性
- php - PHP - 使用 foreach 存储会话数组的值以发送到数据库
- windows - 如何使用 .VBS 代码检测 NumLock 键是否打开/关闭然后将其打开?
- python-3.x - 3d 角度矩形的角
- python - gui 中的 gui - tkinter python
- multithreading - 如何确保不错过活动
- c++ - 使用 VC++ 包含头文件需要额外的步骤吗?
- c++ - 异常 *读取访问冲突* 我应该如何正确删除指针列表数组?
- c# - 在 Moq 中使用具有 CQRS 模式的通用接口