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 dev控制台中显示以下两个错误：

无法读取_pressRow

null

未处理的JS异常：无法读取_pressRow

null

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

Answer 1

在搜索了一段时间后，我遇到了this tutorial describing how to implement a simple ToDo-app，这帮我自己解决了这个问题。

问题是由于我将_renderRow分配给renderRow的{{1}}属性的方式：而不是简单地执行ListView，我需要使用javascript { {1}}功能：renderRow={this._renderRow}。

供参考，以下是我的bind()方法现在的样子：

renderRow={this._renderRow.bind(this)

ReactNative - ListView中的Tapping行给出错误：无法读取null的属性`_pressRow`

JobsRootComponent.js

1 个答案: