谁能解释一下。为什么“res”被记录了两次？

Question

我正在尝试从 flickr 获取图像数据。我收到响应但无法显示图像。我尝试使用 useEffect 获取 api 和 useState 变量来存储图像数组。它仍然被调用了两次。

const DisplayImages = () => {
    let photos = [];
    fetch(
      ` https://www.flickr.com/services/rest/?method=flickr.galleries.getPhotos&api_key=***********************&gallery_id=************&format=json&nojsoncallback=1`
    )
      .then((response) => response.json())
      .then((res) => {
        const images = res;
        console.log(res);
        photos = images.photos.photo;
      });

  return (
    <>
      <div className="imagescontainer">
        {photos.map((photo) => {
            console.log(photo);
          let url = `https://farm${photo.farm}.staticflickr.com/${photo.server}/${photo.id}_${photo.secret}`;
          <>
            {/* <img src={require(url)} alt="img" /> */}
          </>
        })}
      </div>
    </>
  );
};

我希望图像能够被渲染。