javascript - 尝试访问 S3 时呈现比之前渲染更多的钩子(Hook)

Question

我正在使用 React 制作一个小型应用程序，将图片放在私有(private) S3 存储桶上，只有注册用户才能访问它。我在网页设计方面完全没有经验(我更像是一名数据科学家)，所以也许我遵循的策略不是最有效的策略。 不过，我使用 Cognito 进行了注册和登录，并且工作正常。在身份池上，我将读取 Angular 色放入存储桶中。现在我正在尝试在该存储桶中渲染示例图片。

这是我现在的代码:

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. 。请耐心等待，我不知道钩子(Hook)是什么，因为我正在从互联网上挑选代码示例。我尝试直接把它放在 <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>

再说一遍，我对 Promise 知之甚少(来自 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>