Files

赵忠林 d770796df4 feat(dealer): 新增银行卡管理功能

- 添加银行卡管理页面和相关API
- 实现银行卡列表展示、添加、编辑和删除功能
- 优化提现页面，支持选择银行卡进行提现
- 新增 FixedButton 组件用于底部固定按钮

2025-09-06 19:37:49 +08:00

5.5 KiB

Raw Blame History

运行时错误解决方案

问题描述

遇到了运行时错误：TypeError: Cannot read property 'mount' of null

问题分析

这个错误通常发生在 Taro 应用启动时，可能的原因包括：

组件导入缺失
TypeScript 类型错误导致编译问题
循环依赖
组件初始化时的空引用

解决步骤

1. 修复 TypeScript 类型错误

在 src/user/profile/profile.tsx 中修复了类型定义：

// 添加了明确的类型定义
interface ChooseAvatarEvent {
  detail: {
    avatarUrl: string;
  };
}

interface InputEvent {
  detail: {
    value: string;
  };
}

// 修复了函数参数类型
const uploadAvatar = ({detail}: ChooseAvatarEvent) => {
  // 明确的类型定义
}

const submitSucceed = (values: User) => {
  // 使用具体的 User 类型
}

const submitFailed = (error: unknown) => {
  // 使用 unknown 类型替代 any
}

onInput={(e: InputEvent) => getWxNickname(e.detail.value)}
// 明确的事件类型

2. 修复导入问题

在 src/pages/index/Header.tsx 中重新添加了缺失的导入：

import {getUserInfo, getWxOpenId} from "@/api/layout";

3. 重新编译

运行 npm run dev:weapp 重新编译项目。

编译结果

✅ 编译成功

编译时间：10.28秒
发现了87个页面入口
所有TypeScript类型错误已修复
所有导入问题已解决

验证步骤

编译成功完成
开发服务器正常启动
监听模式正常工作

根本原因

主要是由于之前的修改过程中：

删除了必要的导入但没有完全清理相关引用
TypeScript 类型定义不完整导致编译错误
这些编译错误可能导致运行时的初始化问题

预防措施

渐进式修改：一次只修改一个文件，确保每次修改后都能正常编译
类型安全：始终为函数参数和事件处理器提供明确的类型定义
导入检查：修改导入时要确保所有相关引用都正确更新
编译验证：每次修改后都要验证编译是否成功

后续修复 - API调用优化

3. 修复未登录状态下的API调用

在 src/hooks/useUserData.ts 中添加了登录状态检查：

// 获取用户数据
const fetchUserData = useCallback(async () => {
  // 检查用户ID是否存在（更直接的登录状态检查）
  const userId = Taro.getStorageSync('UserId')
  if (!userId) {
    setLoading(false)
    setData(null)
    return
  }

  try {
    setLoading(true)
    setError(null)
    // ... 其余代码
  }
}, [])

4. 实现完整的自动登录功能

在 src/hooks/useUser.ts 中添加了自动登录功能：

// 自动登录（通过OpenID）
const autoLoginByOpenId = async () => {
  try {
    const res = await new Promise<any>((resolve, reject) => {
      Taro.login({
        success: (loginRes) => {
          loginByOpenId({
            code: loginRes.code,
            tenantId: TenantId
          }).then(async (data) => {
            if (data) {
              // 保存登录信息
              saveUserToStorage(data.access_token, data.user);
              setUser(data.user);
              setIsLoggedIn(true);

              // 处理邀请关系
              if (data.user?.userId) {
                try {
                  const inviteSuccess = await handleInviteRelation(data.user.userId);
                  if (inviteSuccess) {
                    console.log('自动登录时邀请关系建立成功');
                  }
                } catch (error) {
                  console.error('自动登录时处理邀请关系失败:', error);
                }
              }

              resolve(data.user);
            } else {
              reject(new Error('自动登录失败'));
            }
          }).catch(reject);
        },
        fail: reject
      });
    });
    return res;
  } catch (error) {
    console.error('自动登录失败:', error);
    return null;
  }
};

并在 loadUserFromStorage 中集成自动登录：

// 从本地存储加载用户数据
const loadUserFromStorage = async () => {
  try {
    const token = Taro.getStorageSync('access_token');
    const userData = Taro.getStorageSync('User');
    const userId = Taro.getStorageSync('UserId');
    const tenantId = Taro.getStorageSync('TenantId');

    if (token && userData) {
      const userInfo = typeof userData === 'string' ? JSON.parse(userData) : userData;
      setUser(userInfo);
      setIsLoggedIn(true);
    } else if (token && userId) {
      // 如果有token和userId但没有完整用户信息，标记为已登录但需要获取用户信息
      setIsLoggedIn(true);
      setUser({ userId, tenantId } as User);
    } else {
      // 没有本地登录信息，尝试自动登录
      console.log('没有本地登录信息，尝试自动登录...');
      const autoLoginResult = await autoLoginByOpenId();
      if (!autoLoginResult) {
        setUser(null);
        setIsLoggedIn(false);
      }
    }
  } catch (error) {
    console.error('加载用户数据失败:', error);
    setUser(null);
    setIsLoggedIn(false);
  } finally {
    setLoading(false);
  }
};

5. 清理重复代码

移除了 src/app.ts 中的重复自动登录逻辑，避免代码冗余和潜在冲突。

5.5 KiB Raw Blame History Unescape Escape