Reactjs 呈现异步获取的数据

我是一个新手，天真地想做以下事情，尝试从Cloudinary渲染一些图像

（注意：我可以记录图像，我只是在尝试渲染图像时出错）

这是一个过于简化的版本，但我想你会发现我的错误：

import axios from 'axios';

const Album = () => {
  const getPhotos = async () => {
    const allPhotosWithTag = await axios.get(
      process.env.REACT_APP_CLOUDINARY_TAG
    );

    const photoArray = allPhotosWithTag.data.resources;
    photoArray.map((photo) => <img href={`${process.env.REACT_APP_CLOUDINARY_CLOUD}/${photo.public_id}.${photo.format}`} />);
  };

  return <div>{getPhotos()}</div>;
};

export default Album;

从“axios”导入axios；
常数相册=（）=>{
const getPhotos=async（）=>{
const allPhotosWithTag=wait axios.get(
process.env.REACT\u APP\u CLOUDINARY\u标签
);
const photoArray=allPhotosWithTag.data.resources；
photoArray.map（（photo）=>）；
};
返回{getPhotos（）}；
};
导出默认相册；

我明白了

错误：对象作为React子对象无效（找到：[对象 承诺)。如果要渲染子对象集合，请使用 而不是数组

---

我很感激有人指导我度过难关，让我知道我失败的地方

快速回答：

getPhotos

返回一个承诺，它是一个对象。错误是

对象作为子对象无效

您的问题的解决方案是使异步操作仅用于获取图像源。然后，使用这些源渲染

img

s标记

const相册=（）=>{
const[photosources，setphotosources]=useState（[]）；
useffect（（）=>{
（异步（）=>{
const allPhotosWithTag=wait axios.get(
process.env.REACT\u APP\u CLOUDINARY\u标签
);
const photoArray=allPhotosWithTag.data.resources；
设置光源(
photoArray.map(
照片=>
`${process.env.REACT\u APP\u CLOUDINARY\u CLOUD}/${photo.public\u id}.${photo.format}`
)
);
})();
}, []);
返回(
{photosources.map（photoSource=>(
))}
);
};

快速回答：

getPhotos

返回一个承诺，它是一个对象。错误是

对象作为子对象无效

您的问题的解决方案是使异步操作仅用于获取图像源。然后，使用这些源渲染

img

s标记

const相册=（）=>{
const[photosources，setphotosources]=useState（[]）；
useffect（（）=>{
（异步（）=>{
const allPhotosWithTag=wait axios.get(
process.env.REACT\u APP\u CLOUDINARY\u标签
);
const photoArray=allPhotosWithTag.data.resources；
设置光源(
photoArray.map(
照片=>
`${process.env.REACT\u APP\u CLOUDINARY\u CLOUD}/${photo.public\u id}.${photo.format}`
)
);
})();
}, []);
返回(
{photosources.map（photoSource=>(
))}
);
};

use effects use effects这非常有效，非常感谢！我想我需要改进它，或者看看Cloudinary是否有足够的响应能力，因为画廊的加载看起来有点笨拙。非常感谢。（我只是在useEffect挂钩结束之前添加了一个空数组，否则它会陷入无限循环）。当然！如果没有它，

useffect

将在每个渲染上运行。我用这个更新了答案。这很好用，非常感谢！我想我需要改进它，或者看看Cloudinary是否有足够的响应能力，因为画廊的加载看起来有点笨拙。非常感谢。（我只是在useEffect挂钩结束之前添加了一个空数组，否则它会陷入无限循环）。当然！如果没有它，

useffect

将在每个渲染上运行。我用这个更新了答案。