TypeError: Undefined is not an object（评估'this.state.videos.map'）

Question

我试图在我的 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> ); } }

Answer 1

改变你像下面这样的渲染方法，这将起作用，

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

}

关键是this.state.videos是空的，直到 api 响应将得到

Answer 2

视频未在 state 中定义。 您需要先初始化 state 然后 setstate 来更新值。