React+Amplify数据创建无响应？Amplify Data示例问题求助

1. 处理window.prompt的空值情况 #

当用户点击prompt的「取消」按钮时，window.prompt会返回null，如果你的Things模型中content字段是必填项，传入null会导致创建失败，但可能不会触发catch块。先在代码里添加判断：

const createTodo = async () => {
  const content = window.prompt("Todo content?");
  // 用户取消输入时直接返回
  if (!content) return;
  
  try {
    const { data, errors } = await client.models.Things.create({
      content,
      isDone: false,
    });
    // 打印创建结果和可能的错误
    console.log('创建结果:', data);
    if (errors) console.error('创建错误:', errors);
    
    void fetchTodos();
  } catch (error) {
    console.error('捕获到错误:', error);
  }
}

2. 检查数据模型的定义 #

打开你的Amplify schema文件（通常在amplify/backend/api/[你的API名称]/schema.graphql），确认Things模型的字段规则：

• content字段是否标记为@required？如果是，传入空值或null会导致创建失败
• isDone字段是否有默认值？如果没有，确保你传入的false符合字段类型要求

示例正确的模型定义：

type Things @model {
  id: ID!
  content: String! # 必填项
  isDone: Boolean!
}

3. 验证权限配置 #

检查模型的@auth规则，确保当前用户有创建数据的权限。比如允许公开访问创建操作：

type Things @model @auth(rules: [{ allow: public, operations: [create, read] }]) {
  id: ID!
  content: String!
  isDone: Boolean!
}

如果权限配置错误，API会静默拒绝创建请求但不抛出前端可见错误。

4. 查看浏览器Network面板 #

点击「Add new todo」按钮后，打开浏览器开发者工具的Network面板：

• 查找是否有发送到https://<你的API ID>.appsync-api.<区域>.amazonaws.com/的请求
• 查看请求的状态码和响应内容，响应中通常会包含具体的错误原因（比如权限不足、字段验证失败）

5. 确认Amplify初始化完成 #

检查你的应用入口文件（比如App.js），确保已经正确初始化Amplify：

import { Amplify } from 'aws-amplify';
import awsExports from './aws-exports';

Amplify.configure(awsExports);

如果未初始化，Amplify客户端无法与后端通信，会导致所有操作静默失败。

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