React native undefined不是TouchableOpacity onPress中的函数

这个问题几乎与此相似：

但问题是，尽管我已经绑定了函数，但我还是得到了错误。这是我的TouchableOpacity组件：

<TouchableOpacity style={styles.eachChannelViewStyle}  onPress={() => this.setModalVisible(true)}>

    {item.item.thumbnail ?
    <Image style={styles.everyVideoChannelThumbnailStyle} source={{uri: item.item.thumbnail}} />
   : <ActivityIndicator style= {styles.loadingButton} size="large" color="#0000ff" />}

    <Text numberOfLines={2} style={styles.everyVideoChannelVideoNameStyle}>
      {item.item.title}
    </Text>
  </TouchableOpacity>

另外，我在构造函数中绑定了函数，如下所示：

this.setModalVisible = this.setModalVisible.bind(this);

---

但是，我仍然得到相同的错误，未定义不是一个函数。关于这个错误有什么帮助吗

我不确定这是否有帮助，但我用这种方式编写函数，没有遇到这个问题

如果我是你，我会尝试在你声明函数的地方绑定它

 setModalVisible = (visible) => {
    this.setState({ youtubeModalVisible: visible });
 }

如果这样做，就不必在构造函数中绑定

constructor(props) {
    ...
    // Comment this out to see it will still bind.
    // this.setModalVisible = this.setModalVisible.bind(this);
    ...
}

最后，如果此函数仅将模态的状态设置为可见，则可能需要删除参数并以这种方式传递

<TouchableOpacity style={styles.eachChannelViewStyle}  onPress={this.setModalVisible}>
  ...
</TouchableOpacity>

// Refactored function declaration would look like this
 setModalVisible = () => {
    this.setState({ youtubeModalVisible: true });
 }

...
//重构后的函数声明如下所示
setModalVisible=（）=>{
this.setState（{youtubeModalVisible:true}）；
}

渲染方法和自定义方法必须在同一范围内。在下面的代码中，我已经演示了同样的方法。我希望您能相应地修改代码，因为我假设您已经掌握了要点：）

---

这看起来有点奇怪。如果你已经完成了你说的所有步骤，你就不应该有这个问题。你介意发布你正在谈论的组件的所有代码吗？我正在谈论的组件是TouchableOpacity。当按下touchableOpacity时，我实际上打开了一个模式。但它每次都会称之为错误！我的意思是，在这里使用它的组件的代码是代码问题是

renderEachChannelView

函数。您尚未绑定该函数的

this

的值，因此当您在其中使用

this

时，它不会指向您想要的内容。必须绑定类中的所有方法，或者（最好）使用箭头函数定义它们。

<TouchableOpacity style={styles.eachChannelViewStyle}  onPress={this.setModalVisible}>
  ...
</TouchableOpacity>

// Refactored function declaration would look like this
 setModalVisible = () => {
    this.setState({ youtubeModalVisible: true });
 }

class Demo extends Component {
  onButtonPress() {
    console.log("click");
  }

  render() {
    return (
        <View>
          <TouchableOpacity onPress={this.onButtonPress.bind(this)}>
            <Text> Click Me </Text>
          </TouchableOpacity >
       <View>
    );
  }
}

class Demo extends Component {
  constructor(props){
    super(props);
    this.onButtonPress= this.onButtonPress.bind(this);
  }
  onButtonPress() {
    console.log("click");
  }

  render() {
    return (
        <View>
          <TouchableOpacity onPress={this.onButtonPress()}>
            <Text> Click Me </Text>
          </TouchableOpacity >
       <View>
    );
  }
}