undefined не является объектом (оценка this.handleMapView.bind)

Я безуспешно пытался привязать методы к классу. Я думаю, что все делаю правильно, как описано в документации. Я также пробовал другие плагины для привязки, но все напрасно, пожалуйста, помогите.

Странно то, что если я связываюсь непосредственно из метода рендеринга, он работает, но в тот момент, когда я пытаюсь вызвать метод из другого метода, ад тормозит.

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

Любая помощь будет высоко оценена. Спасибо.


react-native reactjs react-redux native-base
person Ben Shiundu    schedule 19.12.2016    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Это сработало.

var _this = this;

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

person Ben Shiundu    schedule 19.12.2016
comment
это работает, но более идиоматичным решением было бы использование вместо этого стрелочных функций, поскольку они не переопределяют контекст this: developer.mozilla.org/en/docs/Web/JavaScript/Reference/ - person jevakallio; 19.12.2016
comment
Я не знаю, почему '.map' не работает с моей стороны, хотя библиотека подчеркивания работает хорошо. - person Ben Shiundu; 23.12.2016

arrow_upward
0
arrow_downward

Переместите свои привязки в конструктор следующим образом:

constructor(props){
    super(props);

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

И тогда ваш обратный вызов onPress должен выглядеть так:

onPress={ this.handleMapView }
person Facundo La Rocca    schedule 19.12.2016