Undefined不是评估this.state / this.props的对象 [英] Undefined is not an object evaluating this.state/this.props

问题描述

如何在React Native中绑定范围之外的函数？我收到错误：

How do I bind a function outside of scope in React Native? I'm getting the errors:

undefined is not an object evaluating this.state   

&

undefined is not an object evaluating this.props

我正在使用render方法在加载数据时唤起 renderGPSDataFromServer（）。问题是，我正在尝试在 _buttonPress（）和 calcRow（） > renderGPSDataFromServer（），但我收到了这些错误。

I'm using the render method to evoke renderGPSDataFromServer() when the data has been loaded. The problem is, I'm trying to use _buttonPress() and calcRow() inside of renderGPSDataFromServer(), but I'm getting those errors.

我添加了

constructor(props) {
    super(props);
    this._buttonPress = this._buttonPress.bind(this);
    this.calcRow = this.calcRow.bind(this);

到我的构造函数并且我已经更改 _buttonPress（）{到 _buttonPress =（）=> {，但仍然没有。

to my constructor and I've changed _buttonPress() { to _buttonPress = () => { and still nothing.

我想我理解这个问题，但我不知道如何修复它：

I think I understand the problem but I don't know how to fix it:

renderLoadingView() {
    return (
        <View style={[styles.cardContainer, styles.loading]}>
            <Text style={styles.restData}>
                Loading ...
            </Text>
        </View>
    )
}

_buttonPress = () =>  {
    this.props.navigator.push({
        id: 'Main'
    })
}

renderGPSDataFromServer =() => {
    const {loaded} = this.state;
    const {state} = this.state;

    return this.state.dataArr.map(function(data, i){
        return(
            <View style={[styles.cardContainer, styles.modularBorder, styles.basePadding]} key={i}>
                <View style={styles.cardContentLeft}>
                    <TouchableHighlight style={styles.button}
                        onPress={this._buttonPress().bind(this)}>
                        <Text style={styles.restData}>View Video</Text>
                    </TouchableHighlight>
                </View>

          <View style={styles.cardContentRight}>
            <Text style={styles.restData}>{i}</Text>
            <View style={styles.gpsDataContainer}>
              <Text style={styles.gpsData}>
              {Number(data.lat).toFixed(2)}</Text>
              <Text style={styles.gpsData}>{Number(data.long).toFixed(2)}</Text>
            </View>
            <Text  style={styles.gpsData}>
            {this.calcRow(55,55).bind(this)}
            </Text>
          </View>
        </View>
      );
    });
}

render = ()=> {
    if (!this.state.loaded) {
      return this.renderLoadingView();
    }
    return(
      <View>
        {this.renderGPSDataFromServer()}
      </View>
    )
}};

如何修复此问题，在这种情况下会出现什么问题？

How do I go about fixing this and in this case what is the problem?

推荐答案

发生这种情况是因为 map 方法中的函数创建了不同的背景。您可以使用箭头函数作为词法绑定的 map 方法中的回调。这应该可以解决你遇到的问题。

This is happening because, the function inside the map method creates a different context. You can use arrow functions as the callback in the map method for lexical binding. That should solve the issue you are having.

renderGPSDataFromServer =() => {

    const {loaded} = this.state;
    const {state} = this.state;

    return this.state.dataArr.map((data, i) => {
      return(
        <View style={[styles.cardContainer, styles.modularBorder, styles.basePadding]} key={i}>

          <View style={styles.cardContentLeft}>
            <TouchableHighlight style={styles.button}
             onPress={this._buttonPress().bind(this)}>
            <Text style={styles.restData}>View Video</Text>
            </TouchableHighlight>
          </View>

          <View style={styles.cardContentRight}>
            <Text style={styles.restData}>{i}</Text>
            <View style={styles.gpsDataContainer}>
              <Text style={styles.gpsData}>
              {Number(data.lat).toFixed(2)}</Text>
              <Text style={styles.gpsData}>{Number(data.long).toFixed(2)}</Text>
            </View>
            <Text  style={styles.gpsData}>
            {this.calcRow(55,55).bind(this)}
            </Text>
          </View>

        </View>
      );
    });
  }

此外，一旦你'在类函数定义中使用箭头函数你
不需要在构造函数中绑定它们，如：

Also, once you've used arrow functions in the class function definition you don't need to bind them in constructor like:

constructor(props) {
  super(props);
  this._customMethodDefinedUsingFatArrow = this._customMethodDefinedUsingFatArrow.bind(this)
}

此外，一旦将类函数定义为箭头函数，
在调用它们时不需要使用箭头函数：

Also, once you have defined class functions as arrow functions, you don't need to use the arrow functions while calling them either:

class Example extends React.Component {
  myfunc = () => {
    this.nextFunc()
  }

  nextFunc = () => {
    console.log('hello hello')
  }

  render() {
    // this will give you the desired result
    return (
      <TouchableOpacity onPress={this.myFunc} />
    )
    
    // you don't need to do this
    return (
      <TouchableOpacity onPress={() => this.myFunc()} />
    )
  }
}

这篇关于Undefined不是评估this.state / this.props的对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！