uni-app TypeError: Cannot read property 'toLowerCase' of undefined

uni-app TypeError: Cannot read property ‘toLowerCase’ of undefined

信息类别 详细信息
产品分类 uniapp/App
PC开发环境 Mac
PC版本号 macOS Monterey 12.3.1 M1
手机系统 Android
手机版本号 Android 9.0
手机厂商 华为
手机机型 Mate9
页面类型 vue
vue版本 vue3
打包方式 云端
项目创建方式 CLI
CLI版本号 4.5

示例代码：

<script setup>  
    import { ref } from "@vue/runtime-core";  
    const statusBarHeight = ref(0)  
    try {  
        statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight  
    } catch (e) {  
        console.info("错误", e)  
    }  
</script>

操作步骤：

以上代码在HBuilder X alpha sdk 3.4.10版本下运行到安卓手机。

预期结果：

正常显示，不报错

实际结果：

报错，有该代码的组件无法显示。有时安卓手机白屏，苹果系统及模拟器都是正常显示。

bug描述：

页面中使用uni.getSystemInfoSync() 安卓手机白屏，通过终端调试查看报以下错误：

App Launch uni-app:///App.vue:4  
App Show uni-app:///App.vue:7  
env development uni-app:///App.vue:8  
Uncaught TypeError: Cannot read property 'toLowerCase' of undefined  
    at zt ()  
    at Object.Nn.s [as getSystemInfoSync] ()  
    at setTimeout ()  
zt  
Nn.s  
setTimeout  
setTimeout (async)  
(anonymous)  
__weex_bundle_entry__  
(anonymous) @ VM30:3  
(anonymous) @ VM30:4  
ZI  
JI  
global.(anonymous function).O  
(anonymous)  
(anonymous)  
_emit  
emit  
(anonymous)  
setup uni-app:///pages/index/index.vue:74  
{opt: {…}} "uni-app:///pages/index/index.vue:83"  
错误 TypeError: Cannot read property 'toLowerCase' of undefined  
    at zt ()  
    at Object.Nn.s [as getSystemInfoSync] ()  
    at setup ()  
    at hn ()  
    at ll ()  
    at sl ()  
    at Be ()  
    at Se ()  
    at Oe ()  
    at xt () uni-app:///components/y-nav/y-nav.vue:61  
状态栏高度 RefImpl {__v_isShallow: false, dep: undefined, __v_isRef: true, _rawValue: 0, _value: 0}dep: undefined__v_isRef: true__v_isShallow: false_rawValue: 0_value: 0value: (...)__proto__: Object uni-app:///components/y-nav/y-nav.vue:65  
App Hide uni-app:///App.vue:11

更多关于uni-app TypeError: Cannot read property 'toLowerCase' of undefined的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

已经解决了，原来是这里的问题：
import { ref, computed } from “@vue/runtime-core”;
应该是 import { ref, computed } from “vue”;

更多关于uni-app TypeError: Cannot read property 'toLowerCase' of undefined的实战教程也可以访问 https://www.itying.com/category-93-b0.html


The error TypeError: Cannot read property 'toLowerCase' of undefined in uni-app typically occurs when you’re trying to call the toLowerCase() method on a variable that is undefined. This means that the variable you’re trying to manipulate does not have a value assigned to it.

Here are some common scenarios and solutions to resolve this issue:

1. Check the Variable Assignment

Ensure that the variable you’re trying to call toLowerCase() on is properly assigned a value before using it.

let text = someVariable || ''; // Fallback to an empty string if undefined
let lowerCaseText = text.toLowerCase();

2. Check Data Binding

If you’re using data binding in your template, make sure the data is initialized properly in your script.

export default {
  data() {
    return {
      text: '' // Initialize with a default value
    };
  }
};

3. Check API Responses

If you’re working with API responses, ensure that the data you’re trying to access is present and not undefined.

let response = await someApiCall();
let text = response.data?.someField || ''; // Use optional chaining and fallback
let lowerCaseText = text.toLowerCase();

4. Debugging

Add console logs to check the value of the variable before calling toLowerCase().

console.log('Variable value:', someVariable);
let lowerCaseText = someVariable.toLowerCase();

5. Check Conditional Rendering

If you’re using conditional rendering in your template, ensure that the condition is correctly evaluated.

<template>
  <div v-if="text">
    {{ text.toLowerCase() }}
  </div>
</template>

6. Use Optional Chaining (ES2020)

If you’re using a modern JavaScript environment, you can use optional chaining to safely access properties.

let lowerCaseText = someVariable?.toLowerCase() || '';

Example Scenario and Fix

Suppose you have the following code:

let userName = undefined;
let lowerCaseName = userName.toLowerCase(); // This will throw the error

Fix:

let userName = undefined;
let lowerCaseName = (userName || '').toLowerCase(); // Safe to call
回到顶部