我有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更新,但是图像会被随机删除,而不是当前选择的项目。每个人都说这是一成不变的,但是由于我是新手,所以我不确定如何解决它