一个 useEffect (react) 中的多个 get 请求

Question

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

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

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

Answer 2

如果我是你，我会创建一个自定义组件，只负责抓取和显示图像，并使用它三次。

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

Answer 3

您可以使用 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);
  });

一个 useEffect (react) 中的多个 get 请求

Multiple get requests in one useEffect (react)

get

rxjs

reactjs

axios