☰

この値は関数内ではnullです (React-Native) 質問する

tag-icon • tag-icon listview this react-native
この値は関数内ではnullです (React-Native) 質問する

ローカルテストによると、行レンダリング関数内では 'this' は null のようです。その結果、onPress プロパティにローカル関数をバインドできなくなります。

次のようなレンダリング ブロックがあります:

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

ローカル関数

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

行レンダリング

_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>
    );
}

これは戻ります

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

上記のコードを次のように置き換えると、renderRow で "this" をチェックすると null が返されます。

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

次のコンソール出力が表示されます:

RCTJSLog> null

しかし、

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

コンソール

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

誰か、これが何が原因で起こっているのか指摘してもらえますか。 よろしくお願いします。

ベストアンサー1

this_renderRow現在のクラスにバインドされていないため null です。次の点に注意してください:

コンストラクタでは、関数を明示的にバインドする必要があります。関数をReactコンポーネントに渡す場合は、暗黙的にバインドされない場合もあるためです。

このステートメントは、コンポーネントに渡されるすべての関数に適用されます。たとえば、callThisFunctionを押すと関数を呼び出すとしますTouchableHighlight。次のようにバインドできます。

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

おすすめ記事