开发者问题收集

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