Question

我正在尝试从Firestore提取数据并将其显示在我的应用程序上，但工作正常。但是，它无法显示来自cacheImage组件的图像。我的cacheimage与其他组件（平面列表）配合正常，但是在我的个人资料页面上却无法正常工作。这是我从Firestore获取数据的代码

useEffect(
    () => {
        const unsubscribe = firebase
            .firestore()
            .collection(type)
            .doc(id)
            .onSnapshot(
                doc => {
                    setLoading(false)
                    setDisplayData(doc.data())

                },
                err => {
                    setError(err)
                }
            )
        return () => unsubscribe()


    }, [id])
 return (
    <View style={{styles.container}}>

        <CacheImage style={styles.imageStyle} image={displayData.avatar} width={'100%'} 
        height={300}>
        </CacheImage>

这是我的缓存图片组件（在其他页面上可以正常使用

）

import React, { useState, useEffect } from 'react';
import { Image, View } from 'react-native'
import * as FileSystem from 'expo-file-system';
import md5 from 'md5'

export default CacaheImage = ({image,width,height}) => {

const [failed, setFailed] = useState(false)
const [imgUri, setImgUri] = useState()

   useEffect(()=>{
    console.log('image',image)
    _DownLoadImage = async () => {
    const img = image
    const fileUri = FileSystem.documentDirectory + md5(image)+ '.jpg';
    const info =  await FileSystem.getInfoAsync(fileUri)
    if (!info.exists) {
        FileSystem.downloadAsync(
            img,
            fileUri,
        ).then(({ uri }) => {
            console.log('Finished downloading to ', uri);
         setImgUri({uri: uri})
        })
            .catch(error => {
                console.error(error);
                setFailed(true)
            });

    } else {

        setImgUri({uri: info.uri})
        console.log('exist')
        }
    }
    _DownLoadImage()

   },[])

    return (
    <View style={{borderRadius:10}}>
    <Image style={{ width: width, height: height, borderRadius:10 }} source={imgUri}></Image>
    </View>
    );
    }

我在想这是因为我的组件中有一个useEffect，这会影响我从useEffect函数传递数据。

谢谢！

Answer 1

我猜你要么想使用

setImgUri(info.uri)

或

source={imgUri.uri}

由于您当前正在将imgUri设置为对象，因此除非您的代码中有某些内容您没有向我们展示，否则这可能不是有效的source。

您可能还需要向第二个参数useEffect添加一个依赖项，而不是一个空数组。我看到您的工作示例中有[id]。如果没有依赖项，它将仅在初始安装时运行，之后不再运行。

React Hooks UseEffect无法在我的cacheImage组件上工作

1 个答案: