React类组件中AWS Amplify异步API.graphQL调用问题求助

你的问题核心在于同步方法里嵌套异步操作却没正确处理Promise状态，而且组件调用异步方法时没等数据返回就更新状态。我来一步步帮你修正：

1. 修正DatabaseOperation的异步方法 #

首先，getForms不能是同步方法——因为内部调用了异步的API.graphql，必须改成返回Promise的异步方法，同时修正TypeScript类型：

// File Database.tsx
import { API, graphqlOperation } from '@aws-amplify/api';
// 假设你有预先定义的Form类型，以及GraphQL生成的查询类型
import type { Form, ListFormsQuery } from './your-graphql-types';

export default class DatabaseOperation {
  // 改为异步方法，返回Promise<Form[]>（如果是多表单）或Promise<Form>（单表单）
  async getForms(formID: string): Promise<Form[]> {
    // 调用GraphQL查询，用生成的类型做类型断言
    const result = await API.graphql<ListFormsQuery>(
      graphqlOperation(listForms, { filter: { id: { eq: formID } } })
    );
    
    // 根据你的GraphQL schema提取数据，路径可能需要调整
    const forms = result.data?.listForms?.items || [];
    return forms as Form[];
  }
}

2. 在类组件中正确处理异步调用 #

在componentDidMount中，你需要用async/await（React允许把这个生命周期函数改成异步）或者.then()等待异步操作完成，再更新状态：

// File showData.tsx
import React, { Component } from 'react';
import DatabaseOperation from './Database';
import type { Form } from './your-graphql-types';

// 定义组件状态的类型
interface ShowFormState {
  forms: Form[];
  loading: boolean;
  error?: string;
}

export default class ShowForm extends Component<{}, ShowFormState> {
  private db = new DatabaseOperation();

  constructor(props: {}) {
    super(props);
    this.state = {
      forms: [],
      loading: true
    };
  }

  // 改成async函数，等待数据返回后再更新状态
  async componentDidMount() {
    try {
      const forms = await this.db.getForms("Id");
      this.setState({
        forms,
        loading: false
      });
    } catch (error) {
      console.error('获取表单数据失败:', error);
      this.setState({
        loading: false,
        error: '加载数据出错，请稍后重试'
      });
    }
  }

  render() {
    const { forms, loading, error } = this.state;

    if (loading) return <div>加载中...</div>;
    if (error) return <div className="error">{error}</div>;

    return (
      <div>
        {forms.map(form => (
          <div key={form.id}>
            <h3>{form.title}</h3>
            {/* 渲染表单其他字段 */}
          </div>
        ))}
      </div>
    );
  }
}

关键注意点 #

• 异步方法必须返回Promise：原代码里getForms声明返回Form，但实际返回的是Promise，既会触发TypeScript报错，也会让组件无法正确等待数据。
• 必须等待Promise完成：把componentDidMount改成异步函数后，用await等待getForms执行完毕，再调用setState，确保拿到数据后再更新UI。
• 一定要处理错误：用try/catch（或.catch()）捕获GraphQL调用可能出现的异常，避免组件崩溃。
• 类型安全：用Amplify生成的GraphQL类型（比如ListFormsQuery）可以让TypeScript帮你检查返回数据的结构，减少类型错误。

内容的提问来源于stack exchange，提问作者Henrik Lienstromberg