一次使用多个 get 请求 useEffect (react)答案

【问题标题】：Multiple get requests in one useEffect (react)一次使用多个 get 请求 useEffect (react)
【发布时间】：2021-06-04 01:35:48
【问题描述】：

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

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

【问题讨论】：

如果您可以访问后端部分，添加一个通过 id 数组获取图像的路由可能会很有趣。或者另一种解决方案是通过他们的 id 过滤你的 imageList

标签： reactjs rxjs get axios

【解决方案1】：

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

【讨论】：

【解决方案2】：

您可以创建一个自定义挂钩：

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

【讨论】：

【解决方案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);
  });

【讨论】：