React Native Image Render Flatlist and Use State hook

Question

我的ap中有一个屏幕，用户可以上传照片。在这个屏幕上，照片可以从图库中选择，也可以从相机中拍摄。我有一个数组状态，我保存照片的uri。我用这个数组状态以平面显示照片。每张照片旁边都有一个要删除的图标。但该图标调用的函数不会更新阵列状态并删除照片。可能是异步状态更新。请帮帮我！

const [images, setImages] = useState([]); //images array
const selectFile = async() => { //image from gallery
await launchImageLibrary(options, res => {
console.log('Response = ', res);
if (res.didCancel) {
console.log('User cancelled image picker');
}else {
let source = res;
setImages(prevImages=>([...images,source.assets[0].uri]));
console.log(images);
}
});
};
const takePicture = async () => { //take picture save cameraroll and get picture
try {
const options = {quality: 0.5, base64: false};
let imageUri;
const imageData = await camera.takePictureAsync(options).then(data => {
imageUri=data.uri;
});
await CameraRoll.save(imageUri, {type: 'photo'});
CameraRoll.getPhotos({
first:1,
assetType: 'Photos',
}).then((r)=>{
let imageUri=r.edges[0].node.image.uri;
setImages([...images,imageUri]);
});
console.log(images);
}catch (e) {
console.log(e);
}
};
const removeImage=async(item)=>{ //delete function
setImages(prevImages=>([...prevImages,images.filter(x=>x!==item)]));
alert(images);
}
return(
<FlatList
data={images}
keyExtractor={(item,index)=>item}
numColumns={2}
renderItem={({item,index})=>{
return (
<View style={{margin:2, borderWidth:2, borderColor:'rgba(255,255,255,0.42)',shadowColor: 'black',
shadowOpacity: 0.25,
shadowOffset: {width: 0, height: 2},
shadowRadius: 8,
overflow: Platform.OS === 'android' ? 'hidden' : 'visible',width:160,height:165,backgroundColor:'transparent'}}>
<Image
resizeMode="cover"
style={{
flex:1,
}}
source={{uri: item}}
/>
<TouchableOpacity
key={index}
underlayColor='transparent'
onPress={()=>removeImage(item)}
>
<AntDesign name={'minuscircle'} size={24} color={Colors.molekulRed} style={{marginLeft:'85%', marginTop:'-100%'}}/>
</TouchableOpacity>
</View>
}}
/>

)

Answer 1

试试这个，

const removeImage=async(item)=>{ //delete function
setImages(prevImages=>([...prevImages.filter(x=>x!==item)]));
alert(images);
}