As per local testing, 'this' seems to be null inside the row render function. As a result this prevents me from binding a local function on the onPress prop.
I have this render block:
render() {
return (
<ListView
dataSource={this.state.dataSource}
renderRow={this._renderRow}
renderHeader={this._renderHeader}
style={styles.listView} />
);
}
and a local function
_visitEntryDetail() {
console.log('test');
}
then row render
_renderRow(something) {
return (
<TouchableHighlight
style={[styles.textContainer, filestyle.container]}
onPress={this._visitEntryDetail.bind(this)} >
<View>
<Text style={filestyle.text1} >{something.detail}</Text>
<Text style={filestyle.text2} >{something.size}, {something.timestamp}</Text>
</View>
</TouchableHighlight>
);
}
This returns
message: null is not an object (evaluating 'this.$FileList_visitEntryDetail')"
checking "this" on renderRow returns null when replacing code above with:
_renderRow(file) {
console.log(this);
return (
<TouchableHighlight
style={[styles.textContainer, filestyle.filelistcontainer]}
>
with following console output:
RCTJSLog> null
but is fine when
render() {
console.log('inside render. this value is below me');
console.log(this);
return (
<ListView
console
RCTJSLog> "inside render. this value is below me"
RCTJSLog> [object Object]
Can someone please point out what's causing this. Thanks.
To check for null in React, use a comparison to check if the value is equal or is not equal to null , e.g. if (myValue === null) {} or if (myValue !== null) {} . If the condition is met, the if block will run.
This means there's no sound type system or null-safety present in the logic. If you've worked in native application development and you're evaluating React Native as your first cross-platform framework, the lack of strong types and analyzer warnings might shock you at first.
A React ref most commonly returns undefined or null when we try to access its current property before its corresponding DOM element is rendered. To get around this, access the ref in the useEffect hook or when an event is triggered.
this
is null because _renderRow
has not been binded to the current class. Please keep in mind:
In constructor, you need to explicitly bind a function, if you want to pass it to any react component, as sometimes it doesn't bind implicitly.
This statement applies to any function being passed to the component. For example, you want to call a function callThisFunction
on pressing TouchableHighlight
. You can bind it by:
class SomeComponent extends Component {
constructor(props) {
super(props)
//binding function
this.renderRow = this.renderRow.bind(this)
this.callThisFunction = this.callThisFunction.bind(this)
}
renderRow() {
console.log(this) //not null now
return (
<View>
<TouchableHighlight onPress={this.callThisFunction}>
<Image source={require('image!prev')}/>
</TouchableHighlight>
</View>
)
}
callThisFunction() {
console.log(this) //not null now
}
}
An alternative to NightFury's solution would be to use ES6 Arrow Function syntax without having to manually bind the function in the constructor. Your render()
would then look like this:
render() {
return (
<ListView
dataSource={this.state.dataSource}
renderRow={() => this._renderRow()}
renderHeader={() => this._renderHeader()}
style={styles.listView} />
);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With