未定义不是评估this.state / this.props的对象

小编典典

未定义不是评估this.state / this.props的对象

reactjs

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

undefined is not an object evaluating this.state

和

undefined is not an object evaluating this.props

我正在使用render方法来唤起renderGPSDataFromServer()何时加载数据。问题是，我试图使用_buttonPress()和calcRow()里面renderGPSDataFromServer()，但我发现了这些错误。

我已经添加

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

到我的构造函数中，我已经更改_buttonPress() {为_buttonPress = () => {，什么也没有。

我认为我了解问题，但不知道如何解决：

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>
    )
}};

我该如何解决这个问题，在这种情况下是什么问题？

阅读 228

2020-07-22

共1个答案

小编典典

这是因为map方法内部的函数创建了不同的上下文。您可以将箭头函数用作map词汇绑定方法中的回调。那应该可以解决您遇到的问题。

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>

      );

    });

  }

同样，一旦在类函数定义中使用了箭头函数，就不需要像以下那样在构造函数中绑定它们：

constructor(props) {

  super(props);

  this._customMethodDefinedUsingFatArrow = this._customMethodDefinedUsingFatArrow.bind(this)

}

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

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()} />

    )

  }

}

2020-07-22