Vue3+TypeScript解析JSON并遍历数据遇错误及Proxy获取问题

1. 解决"Cannot read properties of undefined (reading 'topics')"错误 #

• 先确认getBranches的返回类型：如果它是异步方法（返回Promise），必须用await或者.then()处理，不能直接同步取值。示例代码：

  async loadData() {
    try {
      const topicsData = await getBranches();
      this.topics = topicsData; // 用ref/reactive存储数据
    } catch (err) {
      console.error('加载数据失败:', err);
    }
  }
  

• 模板遍历前必须做空值判断，避免数据未加载完成时访问undefined：

  <template>
    <div v-if="topics">
      <!-- 遍历default分支 -->
      <div v-for="(section, key) in topics.default" :key="key">
        <div v-for="table in section.tables" :key="table.id">
          {{ table.name }}
        </div>
      </div>
      <!-- 遍历demographics分支 -->
      <div v-for="(section, key) in topics.demographics" :key="key">
        <div v-for="table in section.tables" :key="table.id">
          {{ table.name }}
        </div>
      </div>
    </div>
    <div v-else>加载中...</div>
  </template>
  

• 用ref存储数据时，初始化要设为null或空对象，同时补充TS类型定义：

  import { ref, onMounted } from 'vue';
  
  // 根据你的JSON结构定义TS类型
  interface Table {
    id: string;
    name: string;
    // 补充其他字段
  }
  interface TopicSection {
    tables: Table[];
  }
  interface TopicsData {
    default: Record<string, TopicSection>;
    demographics: Record<string, TopicSection>;
  }
  
  const topics = ref<TopicsData | null>(null);
  
  onMounted(async () => {
    topics.value = await getBranches();
  });
  

2. 处理Proxy包裹的数据 #

Vue3中ref/reactive会把数据包装成Proxy实现响应式，这是正常机制，直接遍历访问即可，无需额外处理。如果只是调试需要查看原始对象，或者要序列化数据，可使用Vue提供的toRaw方法：

import { toRaw } from 'vue';

const rawTopics = toRaw(topics.value);
console.log(rawTopics); // 输出不带Proxy的普通对象

注意：toRaw仅返回原始对象，修改原始对象不会触发视图更新，日常业务逻辑仍建议直接使用Proxy对象。

3. 额外建议：完善TS类型定义 #

给接口返回数据补充完整的TS类型，能提前规避大量类型错误，上述代码中的类型定义可根据你的实际JSON结构对应调整。

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