Question

我的代码存在问题。要运行算法，我创建了一个按钮，我希望它在按下之后运行，但是会发生的是算法运行然后按钮功能并显示返回值。整个算法在Demopipeline.js内。任何想法??

import...
const demoPipeline = require('./gaitApp/src/apps/Demopipline');

export default class runAlgos extends Component {
    async try () {
        const newRun = await demoPipeline.run();
        console.log('this is:  ');
        console.log(newRun);
    }

    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    Welcome to React Native!
                </Text>
                <Button
                    color='yellowgreen'
                    title="Run Demopipeline"
                    onPress={this.try.bind(this)}
                />

            </View>
        );
    }
}

Answer 1

这种模式应该有效：

class runAlgos extends Component {

    let try = async () => {
        // ..
    }

    render() {
        return (
            <View>
                <Button
                    title=".."
                    onPress={this.try}
                />
            </View>
        );
    }
}

您还可以使用以下内容：

<Button title=".." onPress={() => this.try()} />

用

async try () {
    //..
}

但这是一个不好的做法（性能命中，因为onPress将在每次重新渲染时创建一个 new 函数）

Answer 2

你应该使用这样的函数来解决这个问题：

try = async () => {
    const newRun = await demoPipeline.run();
    console.log('this is:  ');
    console.log(newRun);
}

render() {
    return (
        <View style={styles.container}>
            <Text style={styles.welcome}>
                Welcome to React Native!
            </Text>
            <Button
                color='yellowgreen'
                title="Run Demopipeline"
                onPress={this.try}
            />

        </View>
    );
}

如果将它们定义为箭头函数，则不需要绑定函数。

我的代码在按下按钮之前运行

2 个答案: