undefined не является функцией в TouchableOpacity onPress

Question

Вопрос почти такой же, как этот: функция нажатия touchableopacity не определена (это не функция) React Native

Но проблема в том, что я получаю ошибку, несмотря на то, чтоЯ связал функцию.Вот мой компонент 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>

И это моя функция setModalVisible:

  setModalVisible(visible) {
    console.error(" I am in set modal section ")
    this.setState({youtubeModalVisible: visible});
  }

Кроме того, я связал функцию в конструкторе следующим образом:

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

Но я все еще получаю ту же ошибку, что undefined не является функцией.Любая помощь в отношении этой ошибки?

Answer 1

render method и ваш custom method должны находиться в одной области видимости.В приведенном ниже коде я продемонстрировал то же самое.Я надеюсь, что вы измените свой код соответствующим образом, так как я предполагаю, что вы получили суть:)

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

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

Альтернативно метод привязки в constructor также будет работать

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

Answer 2

Я не уверен, поможет ли это, но я пишу свои функции таким образом и не сталкивался с этой проблемой.

На вашем месте я бы попытался связать функцию в том месте, где вы объявляетеit.

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