未定義はオブジェクトではありません（ 'this.handleMapView.bind'を評価しています）

Question

私は成功したクラスにメソッドをバインドしようとしています。私はドキュメントで説明されているように、すべてのことを正しくやっていると思います。私はまた、他のバインディングプラグインを試してみましたが、無駄なく親切に助けてください。

奇妙なことは、レンダリングメソッドから直接バインドすると動作しますが、別のメソッドからメソッドを呼び出そうとすると、地獄が緩んでしまいます。

import React, { Component } from 'react'; 
import { Navigator, NetInfo, View } from 'react-native'; 
import { bindActionCreators } from 'redux'; 
import { connect } from 'react-redux'; 
import { ActionCreators } from '../actions'; 
import _ from 'underscore'; 
import Api from '../utils/api'; 
import FooterView from '../components/footer'; 
import { Container, Content, Icon, 
     Badge,Footer, FooterTab, Header, 
     Title, Card, CardItem,Text, 
     Spinner, List, ListItem, Tabs, Button } from 'native-base'; 
import theme from '../stylesheets/theme'; 
import Communications from 'react-native-communications'; 

function mapStateToProps(state) { 
    return { 
    currentUser: state.currentUserReducers, 
    }; 
}; 
function mapDispatchToProps(dispatch) { 
    return bindActionCreators(ActionCreators, dispatch); 
}; 


class ClientDirectory extends Component { 
    constructor(props){ 
    super(props); 
    } 

    renderCustomers(){ 
    let { currentUser, isLoading } = this.props; 
    var customers = _.map(currentUser.customers, function(customer){ 
     return(
      <Card style={{padding: 1}}> 
      <CardItem header> 
       <Text>Shop Name: { customer.name }</Text> 
      </CardItem> 
      <CardItem cardBody> 
       <Text> 
        Name: { customer.manager_first_name } { customer.manager_last_name }{"\n"} 
        Region: { customer.region_name }{"\n"} 
        Landmark: { customer.landmark }{"\n"} 
        Phone Number: { customer.phone_number } 
       </Text> 
      </CardItem> 
      <CardItem style={{flex:1, alignItems: 'center', justifyContent: 'center', }} header> 
         <Button transparent style={{ flex:1 }} onPress={() => Communications.phonecall(customer.phone_number, false)}><Icon name='ios-call' /></Button> 
         <Button transparent style={{ flex:1 }} onPress={() => Communications.text(customer.phone_number)}><Icon name='ios-chatboxes'/></Button> 
         <Button transparent style={{ flex:1 }} onPress={ this.handleMapView.bind(this) }><Icon name='ios-compass' /></Button> 
      </CardItem> 
     </Card> 
    ); 
    }); 
    return customers; 
    } 

    handleMapView(){ 
    let { navigator } = this.props; 
    navigator.push({ 
    name: 'ViewOnMap', 
    }); 
    } 

    render(){ 
    return (
    <Container> 
     <Header> 
     <Button transparent>.</Button> 
     <Title>Bonus client list</Title> 
     <Button transparent> 
      <Icon name='ios-menu' /> 
     </Button> 
     </Header> 
     <Content style={{padding: 10, marginBottom:10}}> 
     { this.renderCustomers() } 
     </Content> 
    </Container> 
); 
    } 
}; 

export default connect(mapStateToProps,mapDispatchToProps)(ClientDirectory); 

だけに言及し、私は任意のヘルプは高く評価されます運

http://moduscreate.com/using-es2016-decorators-in-react-native/

https://www.npmjs.com/package/autobind-decorator

して以下にしようとしています。おかげさまで

Answer 1

これは機能しました。

var _this = this;

http://javascriptplayground.com/blog/2012/04/javascript-variable-scope-this/

Answer 2

このようなコンストラクタにあなたのバインディングを移動

：

constructor(props){ 
    super(props); 

    this.handleMapView = this.handleMapView.bind(this); 
} 

そして、あなたたonPressコールバックは次のようになります。

onPress={ this.handleMapView }