删除Flatlist项目不呈现组件

时间:2018-12-22 19:40:14

标签: jquery reactjs react-native react-native-flatlist

我有FlatList来显示图像库,并且有一个删除按钮可以从FlatList中删除项目,我已经使用了拼接和过滤方法从状态中删除选定的项目,并在从状态中删除后更新了状态。但是这些方法都不起作用。再用FlatList渲染相同的图像。

UserController

删除代码:

constructor(props, context) {
    super(props, context);
  this.state = {
    allmedia : [
    {
     photo:'4072710001_f36316ddc7_b.jpg',
      caption: 'Grotto of the Madonna',
      id : 1,
      },
      {
        photo: /media/broadchurch_thumbnail.png,
        caption: 'Broadchurch Scene',
        id : 2,
      },
      {
        photo:
          '4052876281_6e068ac860_b.jpg',
          caption: 'Beautiful Eyes',
          id : 3,
      },
  ],
  }
}

其中 let initialIndex = Math.max(0, currentIndex - 1); let images = this.state.alldata; let deletedImages = this.state.deletedData; if (images.length > 0) { /* //slice method let deletedImage = images.splice(currentIndex, 1); // 删掉选中的照片 deletedImages.push(deletedImage[0]); // push deletedImage // update state this.setState({ alldata: images, deletedData: deletedImages, })*/ //filter methid const filteredData = this.state.alldata.filter(item => item.id !== currentIndex); this.setState({ alldata: filteredData }); } 是当前选择的图像

注意:我的平面列表由另一个组件包裹,所以我的渲染如下所示

currentIndex

无论何时删除图像,render() { const { alldata } = this.state; return ( <View style={styles.container}> <View style={{flex: 1}}> <PhotoBrowser mediaList={alldata} enableGrid={true} displayNavArrows={true} displaySelectionButtons={true} displayActionButton={true} onActionButton={this.onActionButton} displayTopBar = {true} onSelectionChanged={this.handleSelection} onTopRight={this._onTopRight} topRightView={this._renderTopRightView()} topRightStyle={{overflow: 'hidden'}} startOnGrid={true} initialIndex={0} /> </View> </View> ) } 都会使用setState更新,但是图像会被随机删除,而不是当前选择的项目。每个人都说这是一成不变的,但是由于我是新手,所以我不确定如何解决它

0 个答案:

没有答案