undefined가 ('this.handleMapView.bind'를 평가하는) 객체가 아닙니다.

Question

클래스에 메소드를 성공적으로 바인딩하려고 시도했습니다. 나는 설명서에 설명 된대로 모든 것을 올바르게하고 있다고 생각합니다. 나는 또한 다른 바인딩 플러그인을 시도했지만 모두 헛된 것은 친절하게 도움이된다.

이상한 점은 render 메서드에서 직접 바인딩하면 작동하지만 다른 메서드에서 메서드를 호출하려고하면 바로 느슨해집니다.

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

이것은 효과가 있습니다.

constructor(props){ 
    super(props); 

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

을 다음 onPress에 콜백은 다음과 같아야합니다 :

var _this = this;

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

Answer 2

는 다음과 같이 생성자에 바인딩을 이동

작동

onPress={ this.handleMapView }