vue3项目解决 “TypeError: Cannot read properties of undefined (reading ‘xxx‘)“

Posted 2023-03-30 程序媛小y

解决 “TypeError: Cannot read properties of undefined (reading ‘xxx’)”

这个问题，我在网上搜了好久，网上总结的bug的原因如下：

//这个报错 我的问题是 要用到的数据读不到这个属性（我用的vue）
//1.检查你的data定义的属性是不是没有你用到的这个属性,没有的话就定义一个，如下：
#template
<div class="he-info__item">
    <span class="he-label">收货人姓名:</span>
    <span class="he-value"> detail.buyer.name </span>
</div>
<div class="he-info__item">
   <span class="he-label">联系方式:</span>
   <span class="he-value"> detail.buyer.mobile </span>
</div>

#js
export default 
   data () 
       detail: 
        buyer: 
          name: "",
          mobile: "",
        ,
        user: 
          nickname: "",
        ,
      ,
   


//2.也可能是后端返回给你的数据没有这个属性 或者 返回的有的有数据 有的是 null ，
// 这时候就不能写  item.xxx || “”  不然会报错 Cannot read properties of undefined (reading ‘xxx‘)“ 可以这么解决 如下：
#template
 <div v-if="!!item.invite"> item.invite.nickname </div> //有这个属性才显示   
 //或者这样也行
 <div v-if="item?.invite"> item.invite.nickname </div> //有这个属性才显示


 <div v-else> "" </div> //没有返回 或者 null 直接填 “”


//3.网上还有一种就是 视图未更新 数据还没返回 你就开始使用这个属性 可以加个 this.$nectTick (()=>//获取数据) 包裹一下，但是本人没试过

但是上述方法都无法解决我的bug，

我的相关代码片段：
定义一个 getUserList 函数，并且在 onMounted 函数中挂载它，在加载页面时，先通过我自定义的已全局挂载的$api向后端发送请求，获取列表数据

import  onMounted, reactive, ref, getCurrentInstance  from 'vue'


// 下面是setup中的代码
  const  ctx  = getCurrentInstance()//这个是获取vue3中的this指向，因为在vue3中没有this
 	
  onMounted(() => 
    getUserList()
  )
  const getUserList = async () => 
    let params =  ...user, ...pager 
    const  list, page  = await ctx.$api.getUserList(params)
    userList.value = list
    pager.total = page.total
  

逻辑上没有问题，同时也没有出现上述的三种情况。

我的解决方法：
首先这个报错的意思大概是：无法找到 undefined 的 属性。
那在我的代码中的意思就是：找不到 ctx.$api，也就是说 ctx.$api是undefined。

然后我在控制台中打印了一些值：

console.log('ctx: ', ctx)
console.log('ctx.$api: ', ctx.$api) //undefined

结果发现：ctx.$api 为 undefined，并且 ctx 身上并没有我们绑定的 $api

所以，我猜测是 $api 全局绑定没有生效

为了验证，我又在全局对象上绑定了一些东西，并进行测试：

// 在main.js中
app.config.globalProperties.$user = 
  name: '梅长苏',
  weapons: '长剑',
  title: '刺客'


//在自己的页面中使用：
console.log(ctx.$user)// undefined

console.log(ctx.$user.name) //TypeError: Cannot read properties of undefined (reading 'name')

所以就验证了bug 的原因是：vue3的全局绑定没有生效

所以，我在该页面进行了绑定：

import  onMounted, reactive, ref, getCurrentInstance  from 'vue'
import api from './../api'

setup()
	onMounted(() => 
      getUserList()
    )
    const getUserList = async () => 
      // console.log('ctx: ', ctx)
      // console.log('ctx.$api: ', ctx.$api)
      ctx.$api = api //进行局部绑定，生效！！！
      let params =  ...user, ...pager 
      const  list, page  = await ctx.$api.getUserList(params)
      console.log('ctx.$api 成功绑定')
      userList.value = list
      pager.total = page.total
    

此时页面数据已返回

TypeError，未定义的“摘要”，在开发环境中

【中文标题】TypeError，未定义的“摘要”，在开发环境中

【英文标题】：TypeError, 'digest' of undefined, in development environment

【发布时间】：2019-11-30 11:04:14

【问题描述】：

当我们为 localhost 构建 Angular SPA 时，它可以完美运行。

在我们的开发环境中，这个错误会蔓延到 DevTool 控制台并破坏一切： ERROR 错误：未捕获（承诺中）：TypeError：无法读取未定义的属性“摘要”

TypeError: Cannot read property 'digest' of undefined
    at N (auth0-spa-js.production.js:1)
    at ie.<anonymous> (auth0-spa-js.production.js:1)
    at Generator.next (<anonymous>)
    at auth0-spa-js.production.js:1
    at new ZoneAwarePromise (zone-evergreen.js:876)
    at t (auth0-spa-js.production.js:1)
    at ie.loginWithRedirect (auth0-spa-js.production.js:1)
    at AuthGuard.<anonymous> (auth.guard.ts:22)
    at Generator.next (<anonymous>)
    at fulfilled (environment.ts:11)
    at resolvePromise (zone-evergreen.js:797)
    at new ZoneAwarePromise (zone-evergreen.js:879)
    at t (auth0-spa-js.production.js:1)
    at ie.loginWithRedirect (auth0-spa-js.production.js:1)
    at AuthGuard.<anonymous> (auth.guard.ts:22)
    at Generator.next (<anonymous>)
    at fulfilled (environment.ts:11)
    at ZoneDelegate.invoke (zone-evergreen.js:359)
    at Object.onInvoke (core.js:34195)
    at ZoneDelegate.invoke (zone-evergreen.js:358)

我想这一定是关于构建过程的一些东西，一些不同的标志，但我无法确定到底是哪个。

【参考方案1】：

这可能是因为您的开发服务器设置为不安全的来源。

digest 可能指的是Web Crypto API 中的window.crypto.subtle.digest。如果您使用的是基于 Chromium 的浏览器，根据Chromium Projects page here，subtle 属性只能在安全源中使用：

对 WebCrypto API 的访问仅限于安全来源（即 https:// 页面）。

注意：在规范中，crypto.subtle 应该在不安全的上下文中未定义

因为digest 是subtle 的方法，而subtle 是undefined，所以会出现此错误。

我们在使用auth0-spa-js library 时遇到了同样的错误。它在 localhost 上运行，而不是在我们的 http 暂存站点上，但在我们的生产 https 站点上正常。

如果您的来源不安全，请尝试让您的开发环境安全，然后再次测试（应该使用自签名证书）。提醒一下，secure origins 是：

哪些来源是“安全的”？

安全来源是至少匹配以下（方案、主机、端口）模式之一的来源：

(https, *, *) (wss, *, *) (*, 本地主机, *) (*, 127/8, *) (*, ::1/128, *) （文件，*，-） （铬扩展，*，-）

也就是说，安全源是那些从本地机器（必须受信任）或通过网络从加密身份验证服务器加载资源的源。

我不确定Auth0 团队是否有一个在非安全源中工作的 SPA 库（或计划在他们最新的 SPA 库中启用该功能），但他们的原生 JS 库肯定有。

【参考方案2】：

角度框架： 通过为应用程序的 nginx（nginx.conf 或 app.conf）配置 SSL 证书来获取 HTTPS 可以解决此问题。 为您的域分配 ssl 证书和 ssl 密钥。确保将端口更改为 443。

【讨论】：

请添加更多详细信息以扩展您的答案，例如工作代码或文档引用。

【参考方案3】：

这似乎比 Auth0 与 Angular 更相关，但出于好奇，您是否在组件中定义了 digest？

如果没有，您可以在组件级别使用：digest: ;。

我希望这对您的探索有所帮助！