React-Native：无法访问状态值或从renderRow声明的任何方法

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

我试图调用它pressPress像这样：

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

没有帮助

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

没有帮助

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

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

我尝试以这样的方式定义函数：

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

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

我做了大量的教程，大量的示例应用程序，在stackoverflow大量的线程，很多的例子，但没有一个为我工作。 任何解决scheme/想法？ 任何帮助，高度赞赏。 我现在正在为这个问题苦苦挣扎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}丢失了，它创build了一个新的函数（new context）。