H5W3
当前位置:H5W3 > 其他技术问题 > 正文

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

基本情况介绍

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

{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了好几遍!)

回答

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);
})

未经允许不得转载:H5W3 » function组件 收到新props, 但是不更新?

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址