如何在render函数中调用函数？

debugcn 发表于 Dev

德普尔

如果我尝试调用该fetchToken()函数，它只是说它不是一个函数。如果我把它放在外面渲染功能的this.props是undefined，我不能够调用它。

class LoginPage extends Component {


    componentDidMount() {
        Linking.addEventListener('url', this.handleOpenURL);
    }
    componentWillUnmount() {
        Linking.removeEventListener('url', this.handleOpenURL);
    }
    handleOpenURL(event) {
        let code = event.slice(22,86);
        console.log(code);
        this.fetchToken(code)
    }
  
  render() {

        function fetchToken(code) {
            this.props.actions.fetchToken(code)
        }
        
        return (
            <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                <TouchableHighlight style={{backgroundColor: '#9b59b6', height: 70, padding: 20}} onPress={this.openAuth.bind(this)}>
                    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                        <Text style={{color: 'white', fontSize: 16}}>Authenticate with Dribbble</Text>
                    </View>
                </TouchableHighlight>
            </View>
        )
    }
}

普里

将此绑定到构造函数中

您必须将实例绑定this到函数。它是建议为此在构造函数中。

class LoginPage extends Component {
constructor(props) {
    super(props);
    this.handleOpenURL = this.handleOpenURL.bind(this);
}

componentDidMount() {
    Linking.addEventListener('url', this.handleOpenURL);
}
componentWillUnmount() {
    Linking.removeEventListener('url', this.handleOpenURL);
}
handleOpenURL(event) {
    let code = event.slice(22,86);
    console.log(code);         
    this.props.actions.fetchToken(code);
}

 render() {

    return (
        <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
            <TouchableHighlight style={{backgroundColor: '#9b59b6', height: 70, padding: 20}} onPress={this.openAuth.bind(this)}>
                <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                    <Text style={{color: 'white', fontSize: 16}}>Authenticate with Dribbble</Text>
                </View>
            </TouchableHighlight>
        </View>
    )
}

}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。