javascript - 在 React 组件中等待异步函数并显示 Spinner

Question

这里是初学者。

尝试从服务器获取一些数据，并在获取后将其显示在我的 react 组件中。 但是，我在将异步函数集成到我的 react 组件中时遇到了麻烦。

import React, { useState } from "react";
import { request } from "graphql-request";

async function fetchData() {
  const endpoint = "https://localhost:3090/graphql"

  const query = `
    query getItems($id: ID) {
      item(id: $id) {
        title
      }
    }
  `;

  const variables = {
    id: "123123123"
  };

  const data = await request(endpoint, query, variables);
  // console.log(JSON.stringify(data, undefined, 2));

  return data;
}

const TestingGraphQL = () => {
  const data = fetchData().catch((error) => console.error(error));

  return (
    <div>
      {data.item.title}
    </div>
  );
};

export default TestingGraphQL;

我想在等待时简单地显示一个旋转器或其他东西，但我尝试了这个，似乎因为返回了一个 promise ，所以我无法做到这一点。

Answer 1

这里您需要使用 useEffect Hook 来调用 API。 从 API 返回的数据，我在这里存储为一个状态，以及一个加载状态来指示何时进行调用。

按照下面代码之间添加的注释进行操作 -

代码

import React, { useState, useEffect } from "react"; // importing useEffect here
import Layout from "@layouts/default";
import ContentContainer from "@components/ContentContainer";
import { request } from "graphql-request";

async function fetchData() {
   const endpoint = "https://localhost:3090/graphql"

   const query = `
     query getItems($id: ID) {
       item(id: $id) {
         title
       }
     }
   `;

   const variables = {
      id: "123123123"
   };

   const data = await request(endpoint, query, variables);
   // console.log(JSON.stringify(data, undefined, 2));

   return data;
}

const TestingGraphQL = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  
  // useEffect with an empty dependency array works the same way as componentDidMount
  useEffect(async () => {
     try {
       // set loading to true before calling API
       setLoading(true);
       const data = await fetchData();
       setData(data);
       // switch loading to false after fetch is complete
       setLoading(false);
     } catch (error) {
       // add error handling here
       setLoading(false);
       console.log(error);
     }
  }, []);

  // return a Spinner when loading is true
  if(loading) return (
    <span>Loading</span>
  );

  // data will be null when fetch call fails
  if (!data) return (
    <span>Data not available</span>
  );

  // when data is available, title is shown
  return (
    <Layout>
      {data.item.title}
    </Layout>
  );
};