Получение undefined не является объектом (оценка this.props.url)

Question

Я пытаюсь создать в своем приложении компонент, который будет отображать имя со ссылкой на веб-сайт и, похоже, получит ошибку Getting undefined is not an Object ( evaluating 'this.props.url').Я попытался исправить это, добавив .bind(this), но это либо приводит к синтаксической ошибке, либо к той же самой ошибке.

Вот код для компонента

    import React, { Component } from "react";
    import { Linking, Text, StyleSheet, TouchableHighlight } from "react-native";

    const styles = StyleSheet.create({
     sciName: {
      textAlign: "center",
      fontWeight: "bold",
      color: "black"
     }
    });

    class LinkedName extends Component<Props> {
      render() {
        const { latinName } = this.props;

        return (
          <TouchableHighlight
            onPress={this.goToUrl}
            hitSlop={{ top: 50, left: 50, bottom: 50, right: 50 }}
          >
            <Text style={styles.sciName}>{latinName}</Text>
          </TouchableHighlight>
        );
     }

     goToUrl() {
       const { url } = this.props;
       Linking.canOpenURL(url)
         .then(supported => {
           if (supported) {
             Linking.openURL(url);
           } else {
             alert("cannot open this link");
         }
       });
     }
    }

    export default LinkedName;

Answer 1

Метод goToUrl не привязан к экземпляру компонента.

Вы должны либо связать его в конструкторе класса, либо объявить его как функцию стрелки.

// Arrow function declaration
goToUrl = () => {
  const { url } = this.props;
  Linking.canOpenURL(url).then(supported => {
    if (supported) {
      Linking.openURL(url);
    } else {
      alert('cannot open this link');
    }
  });
};

Посмотрите документацию React об обработке событий и связывании.