Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

this value is null in function (React-Native)

Tags:

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.

like image 602
boredgames Avatar asked Apr 09 '15 07:04

boredgames


People also ask

How check null value in React native?

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.

Does React native have NULL safety?

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.

Why is React ref null?

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.


2 Answers

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
  }
}
like image 82
NightFury Avatar answered Sep 21 '22 08:09

NightFury


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} />
    );
}
like image 40
Georgios Avatar answered Sep 23 '22 08:09

Georgios