function组件 收到新props, 但是不更新？

Question

基本情况介绍

想要从数据库中获取图片信息列表，如下：

{imgs:
    [
        {_id: '...',img:'***.png'},
        ...,
    ]
}

然后，用ali-oss签名地址，并存储到images状态中

{imgs:
    [
        {_id:'...', img: '***.png', src: '签名后的地址'}
        ...,
    ]
}

传给子列表组件：

<PictureList imgs={images}

子列表组件接受到props,但是不渲染

const PictureList = ({ imgs }) => {
 return (
 <ul>
 {imgs.map((i) => (
   <img key={i._id} src={i.src} alt="pic" />
 ))}
 </ul>
 );
}
export default PictureList

代码

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()
 
 useEffect(() => {
 getImages();
 }, [])
 async function getImages() {
 try {
 const dbResponse = await fetch(
 `${process.env.REACT_APP_BACKEND_URL}/upload/images`
 );
 const resu = await dbResponse.json();
 setResults(resu);
 const temImgs = []
 await resu.imgs.forEach((result) => {
 allowUrl(result.img).then((res) => {
 result.src = res;
 temImgs.push(result)
 });
 });
 setImages(temImgs);
 } catch (e) {
 console.log("get images failed")
 } finally {
 setLoading(false)
 console.log("get images and signatured")
 }
 }
 
 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

dev信息

element信息

疑问

是那个地方的问题？
async/await ?
还是function组件我用的不对？
（我已经开始怀疑一切了，甚至npm install了好几遍！）

Answer 1

const tasks = resu.imgs.map((result) => new Promise(allowUrl(result.img)));
Promise.all(tasks).then(values => {
    let resultImgs =  resu.imgs.map((t,index) => ({...t, src: values[index] }));
    setImages(resultImgs);
})