javascript - ReactNative - 在 ListView 中点击行给出错误 : Cannot read property `_pressRow` of null

Question

我正在使用 ListView 构建一个小型 ReactNative + Redux 应用程序。我正在关注 docs 中的示例代码并提出了以下设置。我当前的实现与示例代码非常接近，但由于某种原因，当我想“单击”列表项时出现错误。

以下是我的代码中的相关部分:

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}
        />
      )
  }

  ...

}

这段代码对我来说看起来不错，但由于某种原因，当单击列表项时，javacript 崩溃并在 chrome 开发控制台中显示以下两个错误:

1. 无法读取 null 的属性 _pressRow
2. 未处理的 JS 异常:无法读取 null 的属性 _pressRow

根据我的理解，这意味着其 _pressRow 属性作为点击目标的对象实际上是 null。但是那个对象不应该是我的 JobsRootComponent 吗？为什么此时它可以是 null？

Answer 1

找了一会儿，找到了this tutorial describing how to implement a simple ToDo-app这帮助我自己解决了这个问题。

问题是由于我将 _renderRow 分配给 ListView 的 renderRow 属性的方式:而不是简单地执行 renderRow={this._renderRow}，我需要使用 javascript 的 bind() 函数:renderRow={this._renderRow.bind(this)。

作为引用，这是我的 render() 方法现在的样子:

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