我有一个图像数据库,每个图像都包含一个 URL(指向图像)和唯一 ID。
我正在按 id 抓取图像,如下所示: fetchData = 负责通过 api url 获取数据的函数
useEffect(() => {
fetchData("/images/1")
.then(res => res.data)
.then(data => {
setImage(data.data)
})
}, [])
但是,在我的一个组件中,我需要抓取 3 个不同的图像(ID:1、4、10)。 我显然可以通过 3 个不同的 useEffects 来实现,但这似乎是错误的。
另外,我尝试抓取所有图像
useEffect(() => {
fetchData("/images/")
.then(res => res.data)
.then(data => {
setImages(data.data)
})
}, [])
然后执行 <img src ={images[1].url}
但这似乎也不是最佳解决方案,因为我正在抓取所有图像(有很多图像)。
关于如何使这个尽可能干净的任何提示?
答案 0 :(得分:2)
如果我是你,我会创建一个只负责抓取和显示图像的自定义组件,并使用它 3 次。
function ImageComponent({ id }) {
const [image, setImage] = useState();
useEffect(() => {
// In case of id changed, reset component state
setImage(undefined);
fetchData(`/images/${id}`)
.then(res => res.data)
.then(data => {
setImage(data.data)
})
}, [id]);
return (
// Do something with the data here
)
}
答案 1 :(得分:1)
您可以创建自定义挂钩:
function useImage(id) {
const [image, setImage] = useState(null)
useEffect(() => {
fetchData("/images/" + id)
.then(res => res.data)
.then(data => setImage(data.data))
}, [])
return image
}
...然后在组件中根据需要多次使用它:
export default function MyComponent() {
const image1 = useImage('1')
const image2 = useImage('2')
const image3 = useImage('3')
return (
<div>
<img src={image1.url} />
<img src={image2.url} />
<img src={image3.url} />
</div>
);
}
答案 2 :(得分:1)
如果这是您的目标,您可以使用 Promise.all 在一个 useEffect 中完成所有获取。
const imageIds = ["1", "20", "300"];
Promise.all(imageIds.map(id => fetchData(`/images/${id}`).then(res => res.data)))
.then(imageDataArray => {
// do what you want with the images
console.log(imageDataArray);
});