this.props是只读的

Question

如何在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>
    )
}};

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

Answer 1

this.props是只读的

React docs - component and props

因此，一个组件不应该尝试修改它们，更不用说改变它们就像你在这里一样：

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

我建议改用州：

_buttonPress = () =>  {
  this.setState = {
    ...this.state,
    navigator: {
      ...this.state.navigator,
      id: 'Main'
    }
  }
}

关于您的约束问题：

.map方法接受第二个参数，该参数用于在调用回调时设置this的值。

在您的问题的上下文中，您只需要将this作为第二个参数传递给您.map方法，以将组件范围＆{39}绑定到它。

Answer 2

这种情况正在发生，因为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()} />
    )
  }
}

Answer 3

不确定这是否是问题，但我认为代码是错误的，可能会导致您的问题。

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

具体来说这一行onPress={this._buttonPress().bind(this)}> 你正在调用该函数并同时绑定它。

这样做的正确方法是

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

这样，该函数将仅在onPress上调用。

Answer 4

你正朝着正确的方向前进，但仍然存在一个小问题。您正在将function传递给与您的组件具有不同范围（map）的this回调（因为它不是箭头功能），因此当您执行{{1}时您正在重新绑定回调以使用bind(this)中的范围。我认为这应该有效，它基本上将你传递给map的回调转换为箭头函数。此外，由于您在构造函数中map了函数，因此不需要再次执行此操作：

bind

Undefined不是评估this.state / this.props的对象

4 个答案:

this.props是只读的