React-Native：无法访问状态值或从renderRow声明的任何方法 [英] React-Native: Cannot access state values or any methods declared from renderRow

问题描述

我有一个listview，每当用户点击某个项目时，我想用onPress做一些事情（可触摸的高亮显示）。

I have a listview, whenever user clicks on an item, i want to do something with onPress (touchable highlight).

我尝试定义函数然后调用它们onPress，但他们没有工作。

I tried defining function then calling them in onPress but they didnt work.

首先我定义了这样一个函数：

first i defined a function like this :

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：

I tried calling it onPress like this :

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

没有帮助

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

没有帮助

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

即使我甚至无法访问构造函数中定义的道具。它不知道什么是这个！

even i cannot even access props defined in constructor. it don't know what is "this" !

我试图用其他方式定义函数：

I tried to define the function other way like this :

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

我尝试在渲染之前，渲染之后，渲染内部，renderRow之内以及renderRow之后定义_dosome。所有相同的结果。

I tried defining the _dosome before render, after render, inside render, inside renderRow, and after renderRow. all same results.

我确实检查过许多教程，rnplay上的大量示例应用程序，stackoverflow中的大量线程，很多示例，但它们都没有为我工作。
任何解决方案/想法？
我们非常感谢任何帮助。我现在正在努力解决这个问题2天。
提前致谢！

I did check lots of tutorials, lots of sample apps on rnplay, lots of threads in stackoverflow, lots of examples, but none of them worked for me. any solutions/ideas? Any help is highly appreciated. i'm struggling with this issue for 2 days now. Thanks in Advance!

推荐答案

如何解决问题

更改

How to solve your problem

Change

  <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} 中丢失，这创建了一个新函数（新的背景）。

Why?

As you already know(since you are trying to solve the problem by using arrow function and bind), to call renderRow, the caller should be in the same context as the component itself.
But this connection is lost in renderRow={this.renderRow}, which created a new function(new context).

这篇关于React-Native：无法访问状态值或从renderRow声明的任何方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！