React Native Image Render Flatlist 和 Use State 钩子答案

【问题标题】：React Native Image Render Flatlist and Use State hookReact Native Image Render Flatlist 和 Use State 钩子
【发布时间】：2022-09-28 00:12:52
【问题描述】：

我的应用程序中有一个屏幕，用户上传照片。在此屏幕中，可以从图库中选择照片或从相机中拍摄照片。我有一个数组状态，我保存照片的 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>

    }}
/>

)

标签： reactjs react-native react-hooks react-native-flatlist

【解决方案1】：

尝试这个，

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

【讨论】：