listview - flatlist - react native table

este valor es nulo en la función(React-Native)

Question

Según las pruebas locales, ''esto'' parece ser nulo dentro de la función de procesamiento de filas. Como resultado, esto me impide vincular una función local en el prop onPress.

Tengo este bloque de render:

render() {
    return (
        <ListView
            dataSource={this.state.dataSource}
            renderRow={this._renderRow}
            renderHeader={this._renderHeader} 
            style={styles.listView} />
    );
}

y una función local

_visitEntryDetail() {
    console.log(''test'');
}

luego fila 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>
    );
}

Esto devuelve

message: null is not an object (evaluating ''this.$FileList_visitEntryDetail'')"

al marcar "esto" en renderRow, se devuelve nulo al reemplazar el código anterior con:

_renderRow(file) {
    console.log(this);
    return (
        <TouchableHighlight
            style={[styles.textContainer, filestyle.filelistcontainer]} 
             >

Con la siguiente salida de consola:

RCTJSLog> null

pero está bien cuando

render() {
    console.log(''inside render. this value is below me'');
    console.log(this);
    return (
        <ListView

consola

RCTJSLog> "inside render. this value is below me"
RCTJSLog> [object Object]

¿Alguien por favor puede indicar qué está causando esto Gracias.

Answer 1

Si desea pasar la función a un componente de terceros, siempre pase funciones como esa:

        <Carousel
          renderItem={item => this._renderItem(item)}
        />

Cuando se enlaza una función así, no se pierde la instancia de la función en otras clases

Answer 2

Una alternativa a la solución de NightFury sería utilizar la sintaxis de la función de flecha de ES6 sin tener que vincular manualmente la función en el constructor. Tu render() se vería así:

render() {
    return (
       <ListView
           dataSource={this.state.dataSource}
           renderRow={() => this._renderRow()}
           renderHeader={() => this._renderHeader()} 
           style={styles.listView} />
    );
}

Answer 3

this es nulo porque _renderRow no se ha enlazado a la clase actual. Por favor ten en cuenta:

En el constructor, debe vincular explícitamente una función, si desea pasarla a cualquier componente de reacción, ya que a veces no se vincula de forma implícita.

Esta declaración se aplica a cualquier función que se pase al componente. Por ejemplo, desea llamar a una función callThisFunction al presionar TouchableHighlight . Puedes atarlo por:

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