如何在Flatlist react-native内部使用ListItem native-base修复“ undefined is not object”（在这种情况下为“ movieItem.poster_path”）？

Question

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

并获取url，这样我就可以获取要在移动设备中显示的数据，问题出在本机库中，不建议使用List Component，因此文档说应该使用官方react-native的Flatlist Component，此处是代码：

// 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>
        );
    }

但是运行该代码后，出现此错误

TypeError：未定义不是对象（正在评估'movieItem.poster_path'）

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

但是我仍然得到错误。

Answer 1

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

理想情况下，您应该等待电影调用完成，然后再调用该组件，并且也不要将movieItem数据传递给renderDataMovieList方法。

假设movieItem是您正在等待的数据。

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

如何在Flatlist react-native内部使用ListItem native-base修复“ undefined is not object”（在这种情况下为“ movieItem.poster_path”）？

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-04-01 08:52:40

如何在Flatlist react-native内部使用ListItem native-base修复“ undefined is not object”（在这种情况下为“ movieItem.poster_path”）？

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-04-01 08:52:40

解决方案1
0 已采纳 2019-04-01 08:52:40