时间戳

首页 > 解决方案 > 一次使用多个 get 请求 useEffect (react)

reactjs - 一次使用多个 get 请求 useEffect (react)

问题描述

我有一个图像数据库，每个图像都包含一个 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}，但这似乎也不是最好的解决方案，因为我正在抓取所有图像（有很多图像）。

关于如何使这个尽可能干净的任何提示？

标签： reactjsrxjsgetaxios

解决方案

如果我是你，我会创建一个只负责抓取和显示图像的自定义组件，并使用它 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
  )
}

推荐阅读