一个 useEffect 中的多个 get 请求反应

如何解决一个 useEffect 中的多个 get 请求反应

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

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

解决方法

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

,

您可以创建自定义挂钩：

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

,

如果这是您的目标，您可以使用 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);
  });