无法读取未定义的属性，Typescript

Posted 2023-03-28

【中文标题】无法读取未定义的属性，Typescript

【英文标题】：Cannot read property of undefined, Typescript

【发布时间】：2022-01-22 05:27:00

【问题描述】：

我在创建带有可选参数的类函数时遇到问题。我被以下错误所困扰，因为我是打字稿的新手，所以我不确定我必须在代码中更改什么来修复它。此代码在仅用 JS 编写的早期项目中运行良好。

当我在浏览器错误的base-service.ts中检查它时，它特别突出了getRequestOptions。

08:32:12.755 client.ts:22 [vite] connecting...
08:32:13.067 client.ts:52 [vite] connected.
08:32:17.043 locales-service.ts:7 getting locales
08:32:17.048 base-service.ts:19 get /Api/GetLocales/ undefined undefined undefined
08:32:17.288 base-service.ts:21 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'getRequestOptions')
    at request (base-service.ts:21)
    at getLocales (locales-service.ts:9)
    at setup (locale-selector.vue:22)
    at callWithErrorHandling (runtime-core.esm-bundler.js:6737)
    at setupStatefulComponent (runtime-core.esm-bundler.js:6346)
    at setupComponent (runtime-core.esm-bundler.js:6302)
    at mountComponent (runtime-core.esm-bundler.js:4224)
    at processComponent (runtime-core.esm-bundler.js:4199)
    at patch (runtime-core.esm-bundler.js:3791)
    at mountChildren (runtime-core.esm-bundler.js:3987)

还有我的代码

base-service.ts

    import axios from '@/plugins/axios'

    export default class BaseService 
    getRequestOptions(url:any, method:any, data?:any, params?:any , customHeaders?:any) 
      const headers = 
        ...customHeaders
      

      return 
        url:url,
        method:method,
        data: data,
        params: params,
        headers: headers,
      
    

    async request(method:any, url:any, data?:any, params?:any, headers?:any) 
        console.log(method,url,data,params,headers)

        const options = this.getRequestOptions(method, url, data, params, headers)

        try 
            console.log(options)
            const response = await axios(options)
            console.log("Getting response from api")
            console.log(response)
            if (response.status === 200) 
                return response.data
            
         catch (error) 
            console.log(error)
        
    

locales-service.ts

import BaseService from '../base-service'
//?Import models in the future
//import    from '@/common/models'

class LocaleServ extends BaseService 
    async getLocales() 
        console.log("getting locales")

        let result = await super.request(
                'get',
                '/Api/GetLocales/'
                )
        
        console.log(result)
        return result
    


export const LocaleService = new LocaleServ()

任何帮助将不胜感激

编辑：

<script lang="ts">
import  ref  from 'vue'
import  defineComponent  from 'vue'
import CountryFlag from 'vue-country-flag-next'
import  LocaleService  from '@/services'

export default defineComponent(
    name: 'LocaleSelector',
    components: 
        CountryFlag
    ,

    setup () 
        const  getLocales  = LocaleService
        const data = getLocales()

        return 
            data:data
    
  
)
</script>

然后在组件中我用 data 调用它

【问题讨论】：

getRequestOptions() 的第一个参数是url，但您将第一个参数传递为method

错误是否意味着this.getRequestOptions 中的this 未定义？

如何导入/调用 LocaleService（在 client.ts 中）？

我不确定您对“in client.ts”的确切含义，但如果您指的是我称之为 getLocales 的地方。那么目前它在一个地方，'locale-selector.vue' 但这工作得非常好，它只是出于某种原因确实与 getRequestOptions 斗争，我知道它是纯 JS 中的有效代码，因为我以前使用过它。跨度>

【参考方案1】：

问题在于我从 locale-service.vue 中的 LocaleService 调用解构的 getLocales() 方法

我注意到在附加调试器后this 是undefined。根据this article 的说法，解构它会导致它失去上下文。因此，当我在 base-service.ts 中调用 getLocales() 时，this 是 undefined。

简单的解决方法是解决由于缺乏经验而导致的问题。

const  getLocales  = LocaleService
    const data = getLocales()

进入

const data = LocaleService.getLocales()