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

【问题标题】：Cannot read property of undefined, Typescript无法读取未定义的属性，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 中的有效代码，因为我以前使用过它。跨度>

标签： javascript typescript axios

【解决方案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()

【讨论】：