Amplify新手遇Uncaught TypeError：无法设置undefined的'podcast'属性

错误信息 #

datastore.ts:416 Uncaught TypeError: Cannot set properties of undefined (setting 'podcast')

关联代码 #

import './App.css';

import { 
  PodcastCollection 
} from './ui-components';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <PodcastCollection />
      </header>
    </div>
  );
}

export default App;

解决方案 #

• 确认DataStore初始化：在应用入口文件（如index.tsx）中确保Amplify和DataStore已正确配置，示例代码：

import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';
import { DataStore } from '@aws-amplify/datastore';
import { Podcast } from './models';

Amplify.configure(awsconfig);
// 验证DataStore连接是否正常
DataStore.query(Podcast).catch(err => console.error('DataStore连接错误:', err));

• 检查模型定义：查看models/index.ts中的Podcast模型，确认字段、关联关系无语法错误，且模型已同步到云端。

• 重新生成UI组件：若PodcastCollection由Amplify Studio自动生成，执行以下步骤更新组件：

  1. 登录Amplify Studio确认模型状态正常
  2. 本地执行amplify pull拉取最新配置和组件
  3. 重启项目npm start

• 检查组件传参：查看ui-components/PodcastCollection.tsx源码，确认组件是否需要传入model等必填props，比如：

<PodcastCollection model={Podcast} />

• 清理缓存：
  • 清除浏览器缓存并硬刷新页面
  • 删除node_modules和package-lock.json，重新执行npm install
  • 执行amplify codegen models重新生成模型文件

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