Fatal编程技术网
  • javascript/
  • Javascript “如何修复”；“未定义不是对象”；在这种情况下，“；movieItem.海报“U路径”；在Flatlist react native中使用ListItem本机基？

Javascript “如何修复”；“未定义不是对象”；在这种情况下，“；movieItem.海报“U路径”；在Flatlist react native中使用ListItem本机基？

javascript api react-native

Javascript “如何修复”；“未定义不是对象”；在这种情况下，“；movieItem.海报“U路径”；在Flatlist react native中使用ListItem本机基？,javascript,api,react-native,react-native-android,Javascript,Api,React Native,React Native Android,我正在从这个API调用数据 并获取url，这样我就可以在移动设备中显示哪些数据，问题在于本机基本库中的列表组件已被弃用，因此，文档中说应该使用来自官方react native的Flatlist组件，代码如下： // render data list renderDataMovieList = ({ movieItem }) => { return( <ListItem Thumbnail> <

我正在从这个API调用数据

并获取url，这样我就可以在移动设备中显示哪些数据，问题在于本机基本库中的列表组件已被弃用，因此，文档中说应该使用来自官方react native的Flatlist组件，代码如下：

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

//呈现数据列表
renderDataMovieList=（{movieItem}）=>{
返回(
{movieItem.title}
发行日期：{movieItem.Release_Date}
投票平均：{movieItem.Vote_average}
语言：{movieItem.original_Language}
);
}
render（）{
返回(
电影列表
movieItem.id}
onEndReached={this.handleLoadMore}
onEndReachedThreshold={0.5}
initialNumToRender={5}
/>
);
}
但是在我运行代码之后，我得到了这个错误

TypeError:undefined不是对象（正在评估“movieItem.poster\u path”）

我遵循了以下代码模式：

但是我仍然得到错误。

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

理想情况下，您应该等到movies调用完成后再调用组件，并且您不应该将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}
        />
   }

{movieItem&&
movieItem.id}
onEndReached={this.handleLoadMore}
onEndReachedThreshold={0.5}
initialNumToRender={5}
/>
}
我假设movieItem未定义（这就是错误的原因）

理想情况下，您应该等到movies调用完成后再调用组件，并且您不应该将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}
        />
   }

{movieItem&&
movieItem.id}
onEndReached={this.handleLoadMore}
onEndReachedThreshold={0.5}
initialNumToRender={5}
/>
}
What is
movieItem
？是从API获取和调用数据的变量，但它的值是多少？从API获取的值是多少？What is
movieItem
？是从API获取和调用数据的变量，但它的值是多少？从API获取和调用的值是多少？在了解了您的代码答案后，我发现这个代码模式解决了我的问题，看起来像这个renderItem={movieItem=>this.renderDataMovieList（{movieItem:movieItem}）}，但是电影海报不见了，我在android emulator中发现了警告警告：无效的子上下文您只需将movieItem作为简单参数发送到renderDataMovieList
this.renderDataMovieList（movieItem）
并在接收
renderDataMovieList=（movieItem）=>{
时使用
keyExtractor={movieItem=>movieItem.id.toString（）解决无效子上下文的问题
在我讨论你的问题之前，我只想说，非常感谢你解决了keyExtractor问题，是的，这对我来说是有意义的。对于movieItem，仿真器不显示API中的数据，只显示属性。有什么建议可以给我一个更好解决问题的线索吗？了解了你的代码答案后，我发现这个代码模式rn对于我的问题，看起来像这个renderItem={movieItem=>this.renderDataMovieList（{movieItem:movieItem}}），但是电影海报不见了，我在android emulator中发现警告：无效的子上下文您只需将movieItem作为一个简单参数发送到renderDataMovieList。
this.renderDataMovieList（movieItem）
并在接收时使用
renderDataMovieList=（movieItem）=>{
来解决无效子上下文的问题，使用
keyExtractor={movieItem=>movieItem.id.toString（）}
在我讨论你的问题之前，我只想说，非常感谢你解决了keyExtractor问题，是的，这对我来说是有意义的。对于movieItem，模拟器不显示API中的数据，只显示属性。有什么建议吗？有没有给我一个更好解决问题的线索