如何在React Native中将函数绑定到范围之外?我遇到了错误:
undefined is not an object evaluating this.state
和
undefined is not an object evaluating this.props
我正在使用render方法来唤起renderGPSDataFromServer()何时加载数据。问题是,我试图使用_buttonPress()和calcRow()里面renderGPSDataFromServer(),但我发现了这些错误。
renderGPSDataFromServer()
_buttonPress()
calcRow()
我已经添加
constructor(props) { super(props); this._buttonPress = this._buttonPress.bind(this); this.calcRow = this.calcRow.bind(this);
到我的构造函数中,我已经更改_buttonPress() {为_buttonPress = () => {,什么也没有。
_buttonPress() {
_buttonPress = () => {
我认为我了解问题,但不知道如何解决:
renderLoadingView() { return ( <View style={[styles.cardContainer, styles.loading]}> <Text style={styles.restData}> Loading ... </Text> </View> ) } _buttonPress = () => { this.props.navigator.push({ id: 'Main' }) } renderGPSDataFromServer =() => { const {loaded} = this.state; const {state} = this.state; return this.state.dataArr.map(function(data, i){ return( <View style={[styles.cardContainer, styles.modularBorder, styles.basePadding]} key={i}> <View style={styles.cardContentLeft}> <TouchableHighlight style={styles.button} onPress={this._buttonPress().bind(this)}> <Text style={styles.restData}>View Video</Text> </TouchableHighlight> </View> <View style={styles.cardContentRight}> <Text style={styles.restData}>{i}</Text> <View style={styles.gpsDataContainer}> <Text style={styles.gpsData}> {Number(data.lat).toFixed(2)}</Text> <Text style={styles.gpsData}>{Number(data.long).toFixed(2)}</Text> </View> <Text style={styles.gpsData}> {this.calcRow(55,55).bind(this)} </Text> </View> </View> ); }); } render = ()=> { if (!this.state.loaded) { return this.renderLoadingView(); } return( <View> {this.renderGPSDataFromServer()} </View> ) }};
我该如何解决这个问题,在这种情况下是什么问题?
这是因为map方法内部的函数创建了不同的上下文。您可以将箭头函数用作map词汇绑定方法中的回调。那应该可以解决您遇到的问题。
map
renderGPSDataFromServer =() => { const {loaded} = this.state; const {state} = this.state; return this.state.dataArr.map((data, i) => { return( <View style={[styles.cardContainer, styles.modularBorder, styles.basePadding]} key={i}> <View style={styles.cardContentLeft}> <TouchableHighlight style={styles.button} onPress={this._buttonPress().bind(this)}> <Text style={styles.restData}>View Video</Text> </TouchableHighlight> </View> <View style={styles.cardContentRight}> <Text style={styles.restData}>{i}</Text> <View style={styles.gpsDataContainer}> <Text style={styles.gpsData}> {Number(data.lat).toFixed(2)}</Text> <Text style={styles.gpsData}>{Number(data.long).toFixed(2)}</Text> </View> <Text style={styles.gpsData}> {this.calcRow(55,55).bind(this)} </Text> </View> </View> ); }); }
同样,一旦在类函数定义中使用了箭头函数,就不需要像以下那样在构造函数中绑定它们:
constructor(props) { super(props); this._customMethodDefinedUsingFatArrow = this._customMethodDefinedUsingFatArrow.bind(this) }
同样,一旦将类函数定义为箭头函数,则在调用它们时不需要使用箭头函数:
class Example extends React.Component { myfunc = () => { this.nextFunc() } nextFunc = () => { console.log('hello hello') } render() { // this will give you the desired result return ( <TouchableOpacity onPress={this.myFunc} /> ) // you don't need to do this return ( <TouchableOpacity onPress={() => this.myFunc()} /> ) } }