react-native - 如何在渲染函数中调用函数？

Question

如果我尝试调用 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>
        )
    }
}

Answer 1

有一个更干净的解决方案:使用 ES6 箭头函数:

handleOpenURL = (event) => {
    let code = event.slice(22,86);
    console.log(code);         
    this.props.actions.fetchToken(code);
}

fetchToken = (code) => {
    this.props.actions.fetchToken(code)
}

如果您想知道为什么 componentDidMount 或 componentWillUnmount 不需要它，似乎因为它们是组件生命周期的一部分，它们是自动绑定(bind)的，但您仍然可以将它们编写为箭头函数。