TypeError 成员未定义答案

【问题标题】：TypeError member is undefinedTypeError 成员未定义
【发布时间】：2022-01-08 18:23:06
【问题描述】：

您好，我创建了这个 Typescript 类来重用我的搜索。

    export class WorkerSearch {

        private loadingWorkers: Ref<boolean>;
        private possibleWorkers: Ref<UnwrapRef<Array<TsadWorker>>>;

        constructor(loadingWorkers: Ref<boolean>, possibleWorkers: Ref<UnwrapRef<TsadWorker[]>>) {
            this.loadingWorkers = loadingWorkers;
            this.possibleWorkers = possibleWorkers;
        }

        public workerSearch(email: string) {
            console.log("worker search");
            this.loadingWorkers.value = true;
            const map = new Map<string, StringFilterField>();
            map.set("email", StringFilterField.fromValue(email));
            const searchRequest = new SearchRequest(10, 0, map);
            axios
                .post(process.env.VUE_APP_BACKEND_URL + "users/workers/search", searchRequest)
                .then(response => {
                    console.log("response recieved")
                    this.possibleWorkers.value = response.data
                    this.loadingWorkers.value = false
                })
                .catch(error => {
                    defaultErrorHandler(error)
                })
        }
    }

但是使用的时候在控制台报错：“error TypeError: this.loadingWorkers is undefined”
如果我删除'this.loadingWorkers = true'，错误会显示“错误类型错误：this.possibleWorkers is undefined”。

这怎么可能？

这是构造函数调用：

    let loadingWorkers = ref(false);
    let possibleWorkers = ref(new Array<TsadWorker>());
    const workerSearchObj = new WorkerSearch(loadingWorkers, possibleWorkers);

感谢您的帮助

【问题讨论】：

有没有可能ref( )返回undefined？
是的，这是可能的，但我检查了 console.log 并重新调整了一个对象
如果在调用workerSearch 时，loadingWorkers 和 possibleWorkers 可能是undefined，那么如果不先检查引用是否存在，就无法读取或写入它们的value 属性。
对不起，它像 loadinWorkers 和 possibleWorkers 这样的接缝不能被取消定义。我试图检查“loadinWorkers == undefined”，但编译器抱怨需要使用 loadingWorkers.value。
您是否记录了 workerSearch 内部的两个属性以及 axios 回调？

标签： typescript vuejs3

【解决方案1】：

当您从 WorkerSearch 实例中提取 workerSearch 方法并将其传递到其他地方时，您的 workerSearch 方法是未绑定的，也就是说，this 不一定是 workerSearchObj，而不是作为 workerSearchObj.workerSearch() 调用该方法时

let loadingWorkers = ref(false);
let possibleWorkers = ref(new Array<TsadWorker>());
const workerSearchObj = new WorkerSearch(loadingWorkers, possibleWorkers);

// instead of
doSomethingWith(workerSearchObj.workerSearch)
// bind the value of `this` before passing the function
doSomethingWith(workerSearchObj.workerSearch.bind(workerSearchObj))
// or wrap the function
doSomethingWith(mail => workerSearchObj.workerSearch(mail))

// or bind the function from within the class constructor
export class WorkerSearch {
    // ...
    constructor(loadingWorkers: Ref<boolean>, possibleWorkers: Ref<UnwrapRef<TsadWorker[]>>) {
        // ...
        this.workerSearch = this.workerSearch.bind(this);
    }
    // ...
}

【讨论】：