[尝试访问S3时渲染的钩子比上一渲染期间更多

Question

我正在做一个带有响应的小型应用程序，将照片放在私有S3存储桶中，只有注册用户可以访问它。我根本没有网页设计方面的经验（我更是一名数据科学家），所以也许我遵循的策略并不是最有效的策略。但是，我通过Cognito进行了注册和登录，并且可以正常工作。在身份池上，我将读取角色置于存储桶中。现在，我正在尝试在该存储桶中渲染示例图片。

这是我现在拥有的代码：

import React, { useState } from "react";
import { Storage } from "aws-amplify";

export default function LoadImage(props){
  const [imgUrl, setImgUrl] = useState("");

  async function onLoad(){
    try{
      const url = await Storage.get(props);
      setImgUrl(url);
    }
    catch(e){
      alert(e);
    }
  }

  onLoad();
  return(
    <img src={imgUrl} />
  );
}

及其在App.js中使用它的意图

<div>{isAuthenticated ? LoadImage("img/images.png") : <>"No pic 4 u"</>}</div>

此代码给我错误Rendered more hooks than during the previous render.。忍受我，我不知道这是什么钩子，因为我正在从互联网上挑选代码示例。我试图将其直接放置在<img>标记中，为

<div>{isAuthenticated ? <img src={Storage.get("img/images.png")} /> : <>"No pic 4 u"</>}</div>

但是当我检查html时它显示为

<div>{isAuthenticated ? <img src=[Object Promise] /> : <>"No pic 4 u"</>}</div>

同样，我对诺言一无所知（来自react文档）。如果我输入alert(Storage.get("img/images.png"))，则会显示正确的网址。

Answer 1

我认为您绝对应该先阅读一些文档并熟悉基础知识。无论如何，这是您应该如何做：

export default function LoadImage({link}){
  const [imgUrl, setImgUrl] = useState("");

  async function onLoad(){
    try{
      const url = await Storage.get(link);
      setImgUrl(url);
    }
    catch(e){
      alert(e);
    }
  }
  useEffect(onLoad, []);
  return(
    <img src={imgUrl} />
  );
}

并这样称呼它：

<div>{isAuthenticated ? <LoadImage link="img/images.png"/> : <>"No pic 4 u"</>}</div>