function Component receive props but doesn't render it - reactjs

Question

Situation:
first, I fetch imgs list from database:
{imgs:
[
{_id: '...',img:'***.png'},
...,
]
}
then, signature img.src using ali-oss-hook, results like:
{imgs:
[
{_id:'...', img: '***.png', src: 'signatured-http-address'}
...,
]
}
then, pass the imgs to PictureList component ：
<PictureList imgs={images}
PictureList receive the new props,but didn't render it
const PictureList = ({ imgs }) => {
return (
<ul>
{imgs.map((i) => (
<img key={i._id} src={i.src} alt="pic" />
))}
</ul>
);
}
export default PictureList
Code
Picture.js
import React, {useEffect, useState, useRef } from 'react'
import { useAlioss } from '../../hooks/oss-hook'
import PictureList from '../../components/PictureList'
import './style.less'
const Pictures = () => {
const [loading, setLoading] = useState(true)
const [signatured, setSignatured] = useState(false)
const [results, setResults] = useState()
const [images, setImages] = useState([])
const { allowUrl } = useAlioss()
const resultsDoSetRef = useRef(false)
async function getImages() {
try {
const dbResponse = await fetch(
`${process.env.REACT_APP_BACKEND_URL}/upload/images`
);
const resu = await dbResponse.json();
setResults(resu)
resultsDoSetRef.current = true
} catch (e) {
console.log("get images failed")
} finally {
setLoading(false)
console.log("get images done!")
}
}
useEffect(() => {
getImages();
}, [])
async function signatureUrl(raw) {
setSignatured(false)
try {
let tempImgs = []
raw.imgs.forEach((r) => {
allowUrl(r.img).then((res) => {
r.img = res;
tempImgs.push(r)
});
});
setImages(tempImgs);
} catch (e) {
console.log("signature failed",e)
} finally {
setSignatured(true)
console.log("signature done!")
}
}
useEffect(() => {
if (resultsDoSetRef.current) {
resultsDoSetRef.current = false
signatureUrl(results);
}
},[results])
return (
<div className="picture">
{loading ? <h1>Loading</h1> : <PictureList imgs={images} />}
</div>
);
};
export default Pictures
PictureList.js
const PictureList = ({ imgs }) => {
return (
<ul>
{imgs.map((i) => (
<img key={i._id} src={i.src} alt="pic" />
))}
</ul>
);
}
export default PictureList
chrome react devTool component shows props
chrome devTool element shows empty PictureList
In chrome devTool react component shows right props, but the PictureList component still empty <ul></ul>.
Which part is wrong?

Answer 1

Look at the PictureList.js, you are receving "imgs" as the arugument of the function, this is not the same as property you passed in
<PictureList imgs={images}
This "imgs" is actually an object that has a property imgs, so your code will become:
const PictureList = ({ imgs }) => {
return (
<ul>
{imgs.imgs.map((i) => (
<img key={i._id} src={i.src} alt="pic" />
))}
</ul>
);
}
export default PictureList
P.S : Just a suggestion, generally props(or something similarly descriptiove) is used as the parameter argument, so your code will be something like this:
const PictureList = ({ props }) => {
return (
<ul>
{props.imgs.map((i) => (
<img key={i._id} src={i.src} alt="pic" />
))}
</ul>
);
}
export default PictureList

Answer 2

In Picture --signatureUrl() method, raw.imgs.forEach() returns a bounch of promises, these promises can't resolve all at once.
When setImages(tempImgs) ,the images in useState hook receive a empty array first, then push new image to images array when raw.imgs.forEach() returned promise resolve a new image item.
So, we must wait all allowUrl(r.img) promises resolved, then setImages(tempImgs).
function signatureUrl(raw) {
const tasks = raw.imgs.map(i => allowUrl(i.img))
Promise.all(tasks).then(values => {
let resultImgs = raw.imgs.map((t, index) => ({ ...t, src: values[index] }));
setImages(resultImgs)
})
}
PS: Solution do works, but all analizes may be wrong, for reference only.