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

Posted 2023-02-23

【中文标题】React-Native：无法访问状态值或从 renderRow 声明的任何方法

【英文标题】：React-Native: Cannot access state values or any methods declared from renderRow

【发布时间】：2016-11-10 19:07:57

【问题描述】：

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

我尝试在渲染之前、渲染之后、渲染内部、渲染行内部和渲染行之后定义 _dosome。所有相同的结果。

我确实查看了很多教程、rnplay 上的很多示例应用程序、*** 中的很多线程、很多示例，但没有一个对我有用。 任何解决方案/想法？ 非常感谢任何帮助。我现在在这个问题上苦苦挣扎了 2 天。 提前致谢！

【问题讨论】：

请告诉我们你的 react-native 版本

@DavidGuan，我没明白你的意思

您可以在package.json 中查看它，例如 "react-native": "0.29.0"

很抱歉，我误读了您的问题。它是 0.27.2

非常感谢。已经在您的帮助下解决了

【参考方案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 中丢失了，它创建了一个新函数（新上下文）。