最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - ReactNative - Tapping row in ListView gives error: Cannot read property `_pressRow` of null - Stack Overflow

programmeradmin5浏览0评论

I am building a small ReactNative + Redux app using a ListView. I was following the example code from the docs and came up with the following setup. My current implementation is very close to the sample code, but for some reason, I am getting an error when I want to "click" a list item.

Here are the relevant parts from my code:

JobsRootComponent.js

class JobsRootComponent extends Component {

  ...

  _pressRow(row) {
      console.log('JobsRootComponent - _pressRow ', row)
  }

  ...

  _renderRow(rowData, section, row) {
      const title = rowData.title
      const subtitle = 'by ' + rowData.by
      return (
         <TouchableHighlight onPress={() => this._pressRow(row)}>
           <View style={styles.cellContainer}>
             <Text style={styles.cellTitle}>{title}</Text>
             <Text style={styles.cellSubtitle}>{subtitle}</Text>
           </View>
         </TouchableHighlight>          
      )
  }

  ...

  render() {
    return (
        <ListView
          style={styles.container}
          dataSource={this.props.dataSource}
          renderRow={this._renderRow}
        />
      )
  }

  ...

}

This code looks fine to me, but for some reason, when clicking a list item, javacript crashes and displays the following two errors in the chrome dev console:

  1. Cannot read property _pressRow of null
  2. Unhandled JS Exception: Cannot read property _pressRow of null

According to my understanding, this means that the object whose _pressRow property was targeted with the click is actually null. But shouldn't that object be my JobsRootComponent? How e it can be null at this point?

I am building a small ReactNative + Redux app using a ListView. I was following the example code from the docs and came up with the following setup. My current implementation is very close to the sample code, but for some reason, I am getting an error when I want to "click" a list item.

Here are the relevant parts from my code:

JobsRootComponent.js

class JobsRootComponent extends Component {

  ...

  _pressRow(row) {
      console.log('JobsRootComponent - _pressRow ', row)
  }

  ...

  _renderRow(rowData, section, row) {
      const title = rowData.title
      const subtitle = 'by ' + rowData.by
      return (
         <TouchableHighlight onPress={() => this._pressRow(row)}>
           <View style={styles.cellContainer}>
             <Text style={styles.cellTitle}>{title}</Text>
             <Text style={styles.cellSubtitle}>{subtitle}</Text>
           </View>
         </TouchableHighlight>          
      )
  }

  ...

  render() {
    return (
        <ListView
          style={styles.container}
          dataSource={this.props.dataSource}
          renderRow={this._renderRow}
        />
      )
  }

  ...

}

This code looks fine to me, but for some reason, when clicking a list item, javacript crashes and displays the following two errors in the chrome dev console:

  1. Cannot read property _pressRow of null
  2. Unhandled JS Exception: Cannot read property _pressRow of null

According to my understanding, this means that the object whose _pressRow property was targeted with the click is actually null. But shouldn't that object be my JobsRootComponent? How e it can be null at this point?

Share Improve this question asked Mar 30, 2016 at 8:35 nburknburk 22.8k19 gold badges92 silver badges134 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 11

After searching for a while, I came across this tutorial describing how to implement a simple ToDo-app which helped me solve the issue myself.

The problem was due to the way I assigned _renderRow to the renderRow-property of the ListView: Instead of simply doing renderRow={this._renderRow}, I needed to use javascript's bind() function:renderRow={this._renderRow.bind(this).

For reference, here is what my render() method now looks like:

render() {
  return (
      <ListView
        style={styles.container}
        dataSource={this.props.dataSource}
        renderRow={this._renderRow.bind(this)}
      />
    )
}

与本文相关的文章

发布评论

评论列表(0)

  1. 暂无评论