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

问题描述

我有一个列表视图，每当用户点击一个项目时，我想用 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);
    };

我尝试在渲染之前、渲染之后、渲染内部、渲染行内部和渲染行之后定义 _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!

推荐答案

如何解决您的问题

改变

  <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屋！