getDownloadurl在一系列字典中（重新渲染问题，foreach）

Question

我有一系列字典，（例如[{}，{}，{}，{}]，每个字典都包含有关书籍的信息）

我想使用get downloadurl从firebase存储中下载图像。
我当前的代码很像...

const [resObj, setresObj] = useState() // empty variable for update state
let result = []   //create empty array for copy & push new obj

useEffect(() => {
   props.resObj.forEach((obj) => {             // props.resObj: array of dictionary I explained before
            const jpgName = 'bookDB/'+ obj.도서번호 + '.jpg';
            const imgRef = ref(storage, jpgName)
            
            getDownloadURL(imgRef)
                .then((url) => {
                    result1.push({
                        ...obj,
                        bookUrl: url
                    })                    // copy & push dictionary
                })
                .catch((error) => {
                    if (error.code === 'storage/object-not-found') {
                        console.log('이미지 파일 없음')
                        result1.push({
                            ...obj,
                            bookUrl: "https://upload.wikimedia.org/wikipedia/commons/a/ac/No_image_available.svg"
                        })
                    } else { console.log(error)}
                })
            })
        setresObj(result1)
        
    }, [])

此代码更新“ resobj”变量之后， 我将resobj映射为像...不幸的..没有显示的内容

return (
    <div>
        {resObj? resObj.map(item => {
             <img 
                 key = {}
                 className = '~~'
                 onClick = {}
                 src = {item.bookUrl}
             />
        })}
    </div>
)

没有显示..

。它似乎 foreach ， useffect ， usestate ， getDownloadurl Promise 严重纠缠..
我尝试了1）devide下载图像代码作为函数，2）devide下载图像代码作为后退，3）逃脱从useeffect中下载图像代码，4）...（代码的额外差异）...

Answer 1

问题在于，您对setResobj的调用发生在任何调用result1.push发生之前，因此您始终设置一个空数组。通过设置断点并在调试器中运行或添加一些console.log调用来验证这一点。

修复程序是使用Promise.all等待已检索所有下载URL，然后调用setResobj。这样的事情：

useEffect(() => {
   let promises = props.resObj.map((obj) => {
        const jpgName = 'bookDB/'+ obj.도서번호 + '.jpg';
        const imgRef = ref(storage, jpgName)
        
        return getDownloadURL(imgRef)
            .then((url) => {
                return {
                    ...obj,
                    bookUrl: url
                }
            })  
            .catch((error) => {
                if (error.code === 'storage/object-not-found') {
                    console.log('이미지 파일 없음')
                    result1.push({
                        ...obj,
                        bookUrl: "https://upload.wikimedia.org/wikipedia/commons/a/ac/No_image_available.svg"
                    })
                } else { console.log(error)}
            })
        })
    Promise.all(promises).then((results) => {
        setresObj(results);
    });
}, [])