React-Native — undefined не является объектом» (оценка «this.state.*) _renderRow

Я пытаюсь вызвать состояние внутри функции _renderRow(), но продолжаю получать следующую ошибку:

введите здесь описание изображения

Это мой исходный код:
Исходный код

 var Store = require('./store/Store.js');
 var MessageOptions = require('./MessageOptions.js')

 var React = require('react');
 var ReactNative = require('react-native');
 var {
   AppRegistry,
   Image,
   ListView,
   StyleSheet,
   Text,
   View,
 } = ReactNative;


var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2})

 class Application extends React.Component {
   constructor(props) {

   super(props);

   this.state = {
      selectedRowID: 20,
      dataSource: ds
   }
}


componentWillMount() {

  this.getNewMessages();
}


getNewMessages() {

   Store.getMessages().then((messages) => {

       this.setState({
         dataSource: this.state.dataSource.cloneWithRows(messages)
       });

   },(reason) => {

       console.log("Error:", reason);
   });
}


_renderRow(rowData: string, sectionID: number, rowID: number, highlightRow: (sectionID: number, rowID: number) => void) {

  var currentSelectedRowID = this.state.selectedRowID;
  return (

        <View>
           <View style={styles.row}>
              <Image style={styles.thumb} source={require('../android/app/src/main/res/mipmap-hdpi/ic_launcher.png')} />
              <Text style={styles.text}>
                 {rowData.text}
              </Text>
           </View>
           <MessageOptions optionsData={rowData.options} message_uri={rowData.uri}/>
        </View>

   )
}


render() {
  return (
     <ListView
       dataSource={this.state.dataSource}
       renderRow={this._renderRow}
     />
  )
}
};


var styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    justifyContent: 'center',
    padding: 10,
    backgroundColor: 'white',
  },
  thumb: {
    width: 64,
    height: 64,
  },
  text: {
    flex: 1,
  },
  news_item: {
    paddingLeft: 10,
    paddingRight: 10,
    paddingTop: 15,
    paddingBottom: 15,
    marginBottom: 5
  },
   news_item_text: {
    color: '#575757',
    fontSize: 18
  }
});


module.exports = Application;

Ошибка исходит от метода _renderRow, где я сохраняю this.state.selectedRowID в var currentSelectedRowID.

Заранее спасибо.


person Larney    schedule 15.07.2016    source источник
comment
Поставьте точку останова в _renderRow и используйте свои инструменты разработки, чтобы увидеть, как выглядит состояние и к чему у вас есть доступ. Я предполагаю, что то, как это называется, делает состояние вне области видимости. Вы также можете попробовать {this._renderRow.bind(this)}   -  person erichardson30    schedule 15.07.2016
comment
Я только что добавил this._renderRow = this._renderRow.bind(this); конструктору, но не повезло. Я должен изучить отладку. Спасибо за ответ.   -  person Larney    schedule 15.07.2016
comment
Я реализовал this._renderRow = this._renderRow.bind(this); неправильно. Вы были правы.   -  person Larney    schedule 15.07.2016
comment
привяжите его правильно renderRow = {()=>_renderRow} или что-то в этом роде, не можете вспомнить синтаксис, поэтому вам не нужно привязывать его в конструкторе.   -  person Train    schedule 15.07.2016


Ответы (1)


Решение
Проблема была с моим конструктором класса ES6:

class Application extends React.Component {
  constructor(props) {

   super(props);
   this._renderRow = this._renderRow.bind(this);

   this.state = {
      selectedRowID: 20,
      dataSource: ds
   }
}

Решение состояло в том, чтобы добавить следующую строку в мой конструктор:

this._renderRow = this._renderRow.bind(this);
person Larney    schedule 15.07.2016