javascript - 如何从 div 调用函数并渲染返回的 json 对象？

Question

我有以下 React js 代码页:

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

function dailyFiles(props) {
 const [apiError502, setApiError502] = useState(false); 

  // Pull out into a generic reusable function
  const getData = async () => {
    try {
      let apiName = "Dev";
      let path = "/test";
      let myInit = {
        headers: {
          Authorization: `Bearer ${(await Auth.currentSession())
            .getIdToken()
            .getJwtToken()}`
        }
      };
       var result = await API.get(apiName, path, myInit);
    } catch (e) {
      if (e.message === "Request failed with status code 502") {
        toggleApiError502(true);
      } else {
        alert(JSON.stringify(e));
        props.onLogout();
      }
    }
    return result;
  };

  const toggleApiError502 = (show = false) => {
    setApiError502(show);
  };

  var files = {
    Files: [
      {
        Day: "Monday",
        file: "10-02-2020"
      },
      {
        Day: "Friday",
        file: "14-02-2020"
      }
    ]
  };

  return (
    <div className="animated fadeIn">
      <div>
        {files.Files.map(block => block.Day + ": " + block.file + "  ")}
      </div>
    </div>
  );
}

export default dailyFiles;

当我从 div 调用静态 Var files 变量时:

var files = {Files: [{Day: "Monday",file: "10-02-2020"},{Day: "Friday",file: "14-02-2020"}]};

  <div>
    {files.Files.map(block => block.Day + ": " + block.file + "  ")}
  </div>

我得到了预期的结果，但是如何调用我的函数 getData() 获得相同的结果？

const getData = async () => {

getData函数调用一个API，它返回与var文件相同的内容结果？

我尝试在 div 中使用 this.getdata() 调用该函数，但没有成功。

Answer 1

使用useEffect组件安装后获取数据。

function dailyFiles(props) {
  const [apiError502, setApiError502] = useState(false);
  const [files, setFiles] = useState([]);

  useEffect(() => {
    // Pull out into a generic reusable function
    const getData = async () => {
      try {
        let apiName = "Dev";
        let path = "/test";
        let myInit = {
          headers: {
            Authorization: `Bearer ${(await Auth.currentSession())
              .getIdToken()
              .getJwtToken()}`
          }
        };
        var result = await API.get(apiName, path, myInit);
        setFiles(result); // set your files here
      } catch (e) {
        if (e.message === "Request failed with status code 502") {
          setApiError502(true);
        } else {
          alert(JSON.stringify(e));
          props.onLogout();
        }
      }
      return result;
    };
    // call getData
    getData();
  }, []);

  return (
    <div className="animated fadeIn">
      <div>
        {Array.isArray(files.Files) && files.Files.map(block => block.Day + ": " + block.file + "  ")}
      </div>
    </div>
  );
}

export default dailyFiles;