时间戳

首页 > 解决方案 > React Native + TypeScript + 异步

typescript - React Native + TypeScript + 异步

问题描述

我无法让这个组合起作用。我认为这特别是由于混合了 TypeScript？我的语法如此处所示，但我遇到了运行时问题。没有编译错误，但是当遇到 func 时，我得到：

this.foo 不是函数

export default class App extends Component<Props> {
    render() {
        return (
            <Button title="A Button" onPress={this.buttonPressed} />
        );
    }

    buttonPressed() {
        this.foo().then(movies => {
            console.log(movies);
        });
    }

    async foo() { 
        try {
            let response = await fetch('https://facebook.github.io/react-native/movies.json');
            let responseJson = await response.json();
            return responseJson.movies;
        } catch (error) {
            console.error(error);
        }
    }
}

标签： typescriptreact-native

解决方案

正如Crice 所指出的，这仅仅是因为无法this在匿名回调中访问。可以通过以下方式解决：

onPress={() => this.buttonPressed(this)}

推荐阅读