React Native Image Render Flatlist 并使用 State 钩子

Question

我的应用程序中有一个屏幕，即用户上传照片。 在此屏幕中，可以从图库中选择照片或从相机中拍摄照片。 我有一个数组 state 我在其中保存照片的 uri。 我用这个数组 state 在平面列表中显示照片。 每张照片旁边都有一个要删除的图标。 但是这个图标调用的 function 不会更新数组 state 并删除照片。 可能 state 异步更新。 请帮我！

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