求助：Next.js中Tandem Viewer视图更新失败问题

核心实现思路 #

要完成视图切换，关键是通过Tandem Viewer实例调用官方视图加载API，结合Next.js的状态管理响应列表选择事件。

步骤1：确认视图数据结构 #

你获取的data里每个视图对象需包含id和name（或其他标识名称），先确认这两个字段存在，示例结构如下：

{
  "data": [
    {"id": "view-123", "name": "首层平面图"},
    {"id": "view-456", "name": "二层机电视图"}
  ]
}

步骤2：组件中管理选中状态与Viewer实例 #

在Next.js组件中，用useState记录选中的视图ID，同时通过useRef保存Viewer实例（确保初始化后能正确调用API）：

'use client';
import { useState, useEffect, useRef } from 'react';

export default function TandemViewerComponent({ twinId }: { twinId: string }) {
  const viewerRef = useRef<any>(null); // 保存Viewer实例
  const [views, setViews] = useState<any[]>([]);
  const [selectedViewId, setSelectedViewId] = useState<string>('');

  // 获取视图列表
  useEffect(() => {
    const fetchViews = async () => {
      const authHeader = await getAuthHeader(); // 你的授权方法
      const response = await fetch(`https://developer.api.autodesk.com/tandem/v1/twins/${twinId}/views`, {
        headers: { Authorization: authHeader }
      });
      const data = await response.json();
      setViews(data.data);
      // 默认选中第一个视图
      if (data.data.length > 0) setSelectedViewId(data.data[0].id);
    };
    fetchViews();
  }, [twinId]);

  // 初始化Viewer（根据你的实际初始化逻辑调整）
  useEffect(() => {
    const initViewer = async () => {
      const viewer = await window.Autodesk.Tandem.createViewer('viewer-container');
      viewerRef.current = viewer;
      // 加载初始视图
      if (selectedViewId) viewer.loadView(selectedViewId);
    };
    initViewer();
  }, [selectedViewId]);

  // 视图切换处理函数
  const handleViewChange = (viewId: string) => {
    setSelectedViewId(viewId);
    if (viewerRef.current) {
      viewerRef.current.loadView(viewId);
    }
  };

  return (
    <div>
      {/* 视图选择列表 */}
      <div className="view-list">
        {views.map(view => (
          <button
            key={view.id}
            onClick={() => handleViewChange(view.id)}
            className={selectedViewId === view.id ? 'active' : ''}
          >
            {view.name}
          </button>
        ))}
      </div>
      {/* Viewer容器 */}
      <div id="viewer-container" style={{ width: '100%', height: '600px' }}></div>
    </div>
  );
}

常见排查点 #

• 确认viewerRef.current指向已初始化的Viewer实例，未出现null/undefined情况。
• 检查请求视图列表的授权头是否有效，权限需包含data:read和viewables:read。
• 确保调用loadView时传入的是视图的id字段，而非其他标识字段。
• 切换无响应时，打开浏览器控制台查看是否有API错误或Viewer报错（比如401权限问题、视图ID不存在等）。

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