我有一个helper类,如下所示,其中我必须使用new self = this
。否则我将得到TypeError: funcA is not a function
:
class Helper {
constructor() {
self = this;
}
funcA = () => {
console.log('func a');
}
funcB = () => {
self.funcA();
// this.funcA() <- Gives TypeError this.funcA is not a function. console log shows it as undefined.
}
}
export default Helper;
我在功能组件中使用它,如下所示:
import React, {useEffect} from 'react';
import Helper from './helper';
const Component = () => {
useEffect(() => {
const helper = new Helper();
helper.funcB();
}, []);
};
export default Component;
我不明白为什么我需要使用self
。React不是在useEffect
中示例化Helper类一次(而且只示例化一次)吗?所以helper
变量不应该总是引用同一个示例吗?
还有一个更整洁的方法来实现一个helper类吗?我相信我可以使用一个定制的钩子,但是我想把业务登录保留在Vanilla JS类中,因为我发现这些类更容易使用,而且它们的语法也更整洁。
T.J.克劳德示例:
如果我不使用self
,则如下所示:
一个二个一个一个
EDIT此问题与使用setTimeout有关,其中this
的上下文丢失。
为了完整起见,这里是一个我得到错误的例子:
class Helper {
funcA = () => {
console.log('func a');
}
doTick = () => {
this.funcA(); // Gives TypeError this.funcA is not a function
}
funcB = () => {
setTimeout(this.doTick, 1000);
}
}
export default Helper;
我会把解决方案贴出来作为答案,以帮助未来的读者。
2条答案
按热度按时间nnsrf1az1#
通过在
setTimeout
回调中使用arrow函数以确保this
正确引用父对象,解决了此问题:vcirk6k62#
你在一个类中使用了一个arrow函数,Arrow函数和方法(
function
s)有不同的上下文,这就是为什么你在你的类中缺少了this
。