TypeError:未定义不是一个对象(评估“this.state.videos.map”)
2020-07-10
920
我尝试在我的 React Native 应用中获取保存在我设备上的视频文件网格列表作为视频库,但我认为有些地方我做得不对,我使用 react-native-fs 从我创建的自定义文件夹中获取文件。我收到 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>
);
}
}
2个回答
更改渲染方法,如下所示,即可起作用,
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
jamal
2020-07-10
videos 未在 state 中定义。您需要先初始化 state,然后 setstate 来更新值。
Shijesh P
2020-07-10