在这种情况下，如何在 Flatlist react-native 中使用 ListItem 本机基础"movieItem.poster_path"修复"undefined is not object"

我正在从这个API调用数据 https://api.themoviedb.org/3/discover/movie?api_key=9a4a662a126525b07d4b84b079d809d8&language=en-US&sort_by=popularity.asc&include_adult=false&include_video=false&page=1

并获取 url，这样我就可以获取要在移动设备中显示的数据，问题出在本机库中，列表组件已被弃用，因此，文档说应该使用官方 react-native 的平面列表组件，这里的代码：

// render data list
    renderDataMovieList = ({ movieItem }) => {
        return(
            <ListItem Thumbnail>
                <Left>
                    <Thumbnail square large source= {{ uri:"https://image.tmdb.org/t/p/w500" + movieItem.poster_path }}/>
                        <Body>
                            <Text>{ movieItem.title }</Text>
                                <Text note >Release Date : { movieItem.release_date }</Text>
                                <Text note >Vote Avarage : { movieItem.vote_average }</Text>
                                <Text note >Language : { movieItem.original_language}</Text>
                        </Body>
                </Left>
                    <Button transparent>
                        <Icon name="arrow-forward" style={{ color: "#999" }}/>
                    </Button>
            </ListItem>
        );
    }
    render(){
        return(
            <Container>
                <Header>
                    <Left>
                        <Button transparent>
                            <Icon name="menu" />
                        </Button>
                    </Left>
                        <Body>
                            <Title>Movie List</Title>
                        </Body>
                    <Right />
                </Header>
                    <Content>
                        <FlatList 
                            data = { this.state.data }
                            renderItem = { this.renderDataMovieList}
                            keyExtractor={ movieItem => movieItem.id }
                            onEndReached={this.handleLoadMore}
                            onEndReachedThreshold={0.5}
                            initialNumToRender={5}
                        />
                    </Content>
            </Container>
        );
    }

但是在我运行该代码后，我收到此错误

类型错误：未定义不是对象(计算"movieItem.poster_path"(

我遵循以下代码模式：http://docs.nativebase.io/docs/examples/FlatListExample.html

但我仍然收到错误。

我假设movieItem是未定义的(这就是错误的原因(。

理想情况下，您应该等到电影调用完成，然后调用组件，并且您也不会将电影项数据传递给渲染数据电影列表方法。

假设电影项目是你正在等待的数据。

   { movieItem &&
        <FlatList 
            data = { this.state.data }
            renderItem = { this.renderDataMovieList({ movieItem: movieItem }) }
            keyExtractor={ movieItem => movieItem.id }
            onEndReached={this.handleLoadMore}
            onEndReachedThreshold={0.5}
            initialNumToRender={5}
        />
   }

相关内容

最新更新

热门标签：