Reactjs 反应本机列表视图不显示数据

我正在开发一个简单的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);

类AlbumList扩展了React.Component{ 组件willmount（）{ this.props.fetchAlbums（）； } renderAlbumItem=（相册）=>{ 返回( {album.title} ) } render（）{ 返回( 专辑名称} /> ) } } 常量mapStateToProps=状态=>{ 返回状态列表； } const mapDispatchToProps=（调度，ownProps）=>{ 返回bindActionCreators({ fetchAlbums:AlbumListActions.fetchAlbums }，调度） } 导出默认连接（mapStateToProps、mapDispatchToProps）（AlbumList）；

---

当我运行我的应用程序时，它不会显示任何内容。有什么问题以及如何修复？

renderItem的签名有问题。它接受一个对象，该对象的属性之一是

item

，该对象包含您试图渲染的相册

因此，要使其正常工作，请更改

renderItem

，如下所示：

renderAlbumItem({item}) => {
    return (
            <View style={styles.container}>
                <Text>{item.title}</Text>
            </View>
        )
}

renderAlbumItem（{item}）=>{
返回(
{item.title}
)
}

---

您还可以将

item

重命名为

album

-

renderAlbumItem（{item:album}）

。这种语法称为对象解构，你可以在谷歌上找到解释。在这种情况下，请使用

{album.title}

访问标题。

在提取完成后，您的

FlatList

是否重新呈现？我如何检查它？只需

console.log（this.props.albums）

方法中的

在
render
返回之前，它说undefined不是对象。如果我不使用FlatList，我就可以正确地获取所有数据。这很有效。我需要在renderAlbumItem方法中使用album.title。干杯