admin管理员组文章数量:1326478
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:
- Cannot read property
_pressRow
ofnull
- Unhandled JS Exception: Cannot read property
_pressRow
ofnull
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:
- Cannot read property
_pressRow
ofnull
- Unhandled JS Exception: Cannot read property
_pressRow
ofnull
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?
1 Answer
Reset to default 11After 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)}
/>
)
}
本文标签:
版权声明:本文标题:javascript - ReactNative - Tapping row in ListView gives error: Cannot read property `_pressRow` of null - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742206205a2432859.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论