React-Native：無法訪問狀態值或從renderRow聲明的任何方法

Question

我有一個listview，每當用戶點擊一個項目時，我想用onPress做一些事情（可觸摸的高亮顯示）。

我嘗試定義函數，然后在onPress中調用它們，但它們沒有工作。

首先我定義了一個這樣的函數：

constructor(props) {
        super(props);
        this.state = {
          dataSource: new ListView.DataSource({
            rowHasChanged: (row1, row2) => row1 !== row2,
          }),
          loaded: false,
        };
        this._dosome = this._dosome.bind(this);
    }

    _dosome(dd){
      console.log(dd);
    }

然后 ：

render(){
  if (!this.state.loaded) {
      return this.renderLoadingView();
    }

    return (
      <View style={{
        flex: 1
      }}>
      <ListView
        dataSource={this.state.dataSource}
        renderRow={this.renderRow}
        style={styles.listView}
      />
      </View>
    );
  }

  renderRow(data) {

    var header = (
      <View>
          <View style={styles.rowContainer}>
            <View  style={styles.textContainer}>
              <Text style={styles.title}>{data.nid}</Text>
              <Text style={styles.description} numberOfLines={0}>{data.title}</Text>
            </View>
          </View>
          <View style={styles.separator}></View>
    </View>
    );
///////////
    var cid = [];
    var content = [];
    for(let x=0; x < Object.keys(data.course).length; x++){
      cid[x] = data.course[x].course_id;
      content.push(
        <TouchableHighlight
        underlayColor='#e3e0d7'
        key={x}
        onPress={ this._dosome } //// **** PROBLEM HERE ****
        style={styles.child}
        >
        <Text style={styles.child}>
        {data.course[x].title}
        </Text>
        </TouchableHighlight>
      );
    }
    console.log(cid);
    var clist = (
      <View style={styles.rowContainer}>
      {content}
      </View>
    );
////////////
    return (
      <Accordion
        header={header}
        content={clist}
        easing="easeOutCubic"
      />
    );
  }


  renderLoadingView() {
    return (
      <View style={styles.loading}>
        <Text style={styles.loading}>
          Loading Courses, please wait...
        </Text>
      </View>
    );
  }
}

但它沒有用，錯誤：

TypeError: Cannot read property '_dosome' of null(…)

我嘗試像這樣調用onPress：

onPress={ this._dosome.bind(this) }

沒有幫助

onPress={ ()=> {this._dosome.bind(this)}}

沒有幫助

onPress={ console.log(this.state.loaded)}

即使我甚至無法訪問構造函數中定義的道具。 它不知道什么是“這個”！

我嘗試用其他方式定義函數：

var _dosome = (dd) => {
      console.log(dd);
    };

我嘗試在渲染之前，渲染之后，渲染內部，renderRow之內以及renderRow之后定義_dosome。 所有相同的結果。

我確實檢查了許多教程，rnplay上的大量示例應用程序，stackoverflow中的大量線程，很多示例，但它們都沒有為我工作。 任何解決方案/想法？ 任何幫助都非常感謝。 我現在正在努力解決這個問題2天。 提前致謝！

Answer 1

如何解決你的問題

更改

  <ListView
    dataSource={this.state.dataSource}
    renderRow={this.renderRow}
    style={styles.listView}
  />

至

  <ListView
    dataSource={this.state.dataSource}
    renderRow={data => this.renderRow(data)}
    style={styles.listView}
  />

要么

  <ListView
    dataSource={this.state.dataSource}
    renderRow={this.renderRow.bind(this)}
    style={styles.listView}
  />

為什么？

正如您所知（因為您試圖通過使用箭頭函數和bind來解決問題），要調用renderRow ，調用者應該與組件本身位於相同的上下文中。
但是這個連接在renderRow={this.renderRow}丟失，它創建了一個新函數（新上下文）。