Установка неопределенного свойства в классе машинописного текста
У меня есть класс, который выглядит примерно так
export class TestScreen extends Component<any, LoginScreenState> {
private wallet: Wallet;
async connect() {
this.wallet = WAL.accessContext.initWallet(getWalletProviders()[0]);
....
}
render() {
return (
<div>
<button onClick = {this.connect}>Connect</button>
<br />
</div>
);
}
}
Я получаю следующую ошибку
Unhandled Rejection (TypeError): Cannot set property 'wallet' of undefined
Я понимаю эту ошибку, но я не уверен, какой правильный шаблон здесь использовать. Я хочу установить это значение только при запуске connect().
Я не хочу инициализировать объект каким-то мусором, а затем заменять его эфиром. Чувствую, что мне не хватает чего-то очевидного здесь.
Я думаю, что Сильвио что-то здесь понимает, сообщение предполагает, что «это» не определено, что обычно означает, что функция была вызвана из другого контекста. Если вы измените async connect() { ... } на async connect = () => { ... } (который привязывается к контексту класса), это может сработать. Но здесь нужно больше информации, чтобы быть уверенным.
Спасибо, ребята, я обновил код, чтобы показать, как я вызываю соединение. У меня есть кнопка, которая находится на выходе render().
Может быть, попробуйте сделать onClick = {() => this.connect()} вместо onClick = {this.connect}. Я думаю, это должно исправить вашу проблему с контекстом.
Ах да, спасибо, именно в этом проблема.
Ответы 1
this может быть довольно сложным в TypeScript. Поведение this на самом деле исходит из JavaScript, как отметил @ecraig12345 в комментариях. При передаче ссылки на метод в некоторых случаях вы теряете контекст. Этот ответ дает отличное объяснение. Вы также можете узнать больше об этом в статье Документация по TypeScript.
В вашем случае предлагаю сделать следующее. Это довольно распространенный синтаксис.
onClick = {e => this.connect(e)}
В качестве примечания: вы можете заставить средство проверки типов отлавливать подобные проблемы с помощью явной подписи this в функции (async connect(this: TestScreen)). Вы можете узнать больше о том, как Typescript обрабатывает this на веб-сайт.
Одно уточнение: поведение this на самом деле является частью JavaScript, а не TypeScript. (но также влияет на TS, поскольку он компилируется в JS)
Как вы вызываете
connect? У вас есть экземпляр класса, с которым вы его используете?