Как исправить «undefined не является объектом» в этом случае «movieItem.poster_path», используя native-base ListItem внутри Flatlist response-native?

1

Я вызываю данные из этого API https://api.themoviedb.org/3/discover/movie?api_key=9a4a662a126525b07d4b84b079d809d8&language=en-US&sort_by=popularity.asc&include_adult=false&include_video=

и получение URL-адреса, чтобы я мог получить данные для отображения на мобильном устройстве, проблема в библиотеке native-base, компонент List устарел, поэтому в документации сказано, что следует использовать 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>
        );
    }

Но после того, как я запустил этот код, я получаю эту ошибку

Ошибка типа: undefined не является объектом (оценка 'movieItem.poster_path')

Я следовал этому шаблону кода: http://docs.nativebase.io/docs/examples/FlatListExample.html

но я все еще получаю ошибку.

  • 0
    Что такое movieItem ?
  • 0
    переменная для извлечения и вызова данных из API
Показать ещё 2 комментария
Теги:
react-native
react-native-android

1 ответ

0
Лучший ответ

Я предполагаю, что 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}
        />
   }
  • 0
    после изучения вашего кода ответа я нашел этот шаблон кода для своей проблемы, похож на этот renderItem = {movieItem => this.renderDataMovieList ({movieItem: movieItem})}}, но плакат с фильмом пропал, и я нашел предупреждение в Android предупреждение эмулятора: недопустимый дочерний контекст
  • 0
    Вы просто отправляете movieItem как простой параметр для renderDataMovieList. this.renderDataMovieList(movieItem) и при получении renderDataMovieList = (movieItem) => {
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню