[英]TypeError: Undefined is not an object (evaluating 'this.state.videos.map')
I tried to get a grid list of video files saved on my device as video gallery in my react native app, but I think there's something am not doing right, I used react-native-fs to fetch the files from my custom folder I created.我试图在我的 react native 应用程序中获取保存在设备上的视频文件的网格列表作为视频库,但我认为有些地方做得不对,我使用 react-native-fs 从我创建的自定义文件夹中获取文件. I get a typeError message.
我收到一条 typeError 消息。
state = { index: null } componentWillMount() { RNFS.readDir(RNFS.ExternalStorageDirectoryPath + "CustomFolder Videos").then((result) => { console.log('GOT RESULT', result); return Promise.all([RNFS.stat(result[0].path), result[0].path]); }).then((statResult) => { let videos = []; var allowedExtensions = /(\.avi|\.mp4|\.mov|\.wmv|\.avi)$/i; statResult.forEach(item => { if (item.isFile() &&.allowedExtensions.exec(item.originalFilepath)) { videos;push(item); } }). console.log(videos) }) } setIndex = (index) => { if (index === this.state;index) { index = null. } this.setState({ index }) } render() { return ( < View style = { styles.container } > < ScrollView contentContainerStyle = { styles.scrollview } {...this.state.videos,map((p. i) => { const isSelected = i === this.state;index. const divide = isSelected && this?share === true: 1; 3: return ( < Video source = { { uri: videos } } style = { { opacity. i === this.state?index. 0:5, 1: width, width / divide: height. width / divide } } key = { i } underlayColor = 'transparent' onPress = { () => this.setIndex(i) } ref = { ref => { this;player = ref. } } // Store reference onError = { this;videoError } // Callback when video cannot be loaded /> ) }) } > < /ScrollView> < /View> ); } }
change you render methods like below, that will works,改变你像下面这样的渲染方法,这将起作用,
state = {
index: null,
videos:[]
}
render() {
return (
<View style={styles.container}>
<ScrollView
contentContainerStyle = {styles.scrollview}
{
this.state.videos&& this.state.videos.length>0 && this.state.videos.map((p, i) => {
const isSelected = i === this.state.index;
const divide = isSelected && this.share === true ? 1 : 3;
return(
<Video
source={{uri: videos}}
style={{opacity: i === this.state.index ? 0.5 : 1, width: width/divide, height: width/divide}}
key={i}
underlayColor='transparent'
onPress={() => this.setIndex(i)}
ref={ref => {
this.player = ref;
}} // Store reference
onError={this.videoError} // Callback when video cannot be loaded
/>
)
})
}
>
</ScrollView>
</View>
);
}
}
the point is that
this.state.videos
is empty till the api response will get关键是
this.state.videos
是空的,直到 api 响应将得到
videos is not defined in the state.视频未在 state 中定义。 You need to initialise state first and then setstate to update the values.
您需要先初始化 state 然后 setstate 来更新值。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.