web-dev-qa-db-fra.com

Uncaught TypeError: impossible de lire la propriété 'props' de null

  • J'ai un code de réaction
  • ce code rend divers panneaux dans l'interface utilisateur.
  • lorsque je clique sur un tag, cette fonction s'appelle sportsCornerPanel ()
  • mais je reçois le TypeError Uncaught comment y remédier
  • fournir le code de fragment ci-dessous.
  • tout le code que vous pouvez voir dans le violon

extrait de code

    sportsCornerPanel() {
        debugger;

        console.log("sportsCornerPanel"
        console.log("this.props.sportsPanelState.size-->" + this.props);

        if (this.props.sportsPanelState.size === 'hidden') {

            if (!this.props.sportsPanelState.visible) {
                this.props.dispatch(sportsOpenPanel());
            } else {
                this.props.dispatch(sportsClosePanel());
            }
        }
    }


    render() {


        let sportsContent, leftNavLink;

        if (this.props.sports-layout !== 'small') {
            console.log("SportsBox---page loads at bigger size");
            console.log("SportsBox---page loads at ipad size");
            sportsContent = <SportsBox className="sports-header"/>;
        } else {
            if (this.props.sportsPanelState.visible) {
                console.log("sportsPanelState--when it becomes small--around ipad width");

                sportsContent = <SportsBox className="sports-nav"/>;
                leftNavLink = <a onClick={this.sportsCornerPanel} href="javascript:;" className="header-navLink active"></a>;
            } else {
                if (this.props.sports.active) {

                    console.log("SportsBox");

                    sportsContent = <SportsBox className="sports-nav"/>;
                } else {

                    console.log("leftNavLink--when it becomes small--around ipad width");

                    leftNavLink = <a onClick={this.sportsCornerPanel} href="javascript:;" className="header-navLink"></a>;
                }
            }
        }


output

Uncaught TypeError: Cannot read property 'props' of null
javascriptjsonreactjs
29
user5075509

Puisque vous n'utilisez pas React.createClass Dans les méthodes de classe, this ne fait pas référence à l'occurrence du composant. Vous devez donc le lier manuellement. Il y a plusieurs façons:

1. Lier manuellement this dans le constructeur de la classe

constructor(props) {
    super(props);
    this.sportsCornerPanel= this.sportsCornerPanel.bind(this);
}

2. Utiliser les initialiseurs de propriété ES7 avec la fonction flèche

sportsCornerPanel = () => {
    debugger;

    console.log("sportsCornerPanel"
    console.log("this.props.sportsPanelState.size-->" + this.props);

    if (this.props.sportsPanelState.size === 'hidden') {

        if (!this.props.sportsPanelState.visible) {
            this.props.dispatch(sportsOpenPanel());
        } else {
            this.props.dispatch(sportsClosePanel());
        }
    }
}

. Lier this au site d’appel

Dans la méthode render():

    let sportsContent, leftNavLink;

    if (this.props.sports-layout !== 'small') {
        console.log("SportsBox---page loads at bigger size");
        console.log("SportsBox---page loads at ipad size");
        sportsContent = <SportsBox className="sports-header"/>;
    } else {
        if (this.props.sportsPanelState.visible) {
            console.log("sportsPanelState--when it becomes small--around ipad width");

            sportsContent = <SportsBox className="sports-nav"/>;
            leftNavLink = <a onClick={this.sportsCornerPanel.bind(this)} href="javascript:;" className="header-navLink active"></a>;
        } else {
            if (this.props.sports.active) {

                console.log("SportsBox");

                sportsContent = <SportsBox className="sports-nav"/>;
            } else {

                console.log("leftNavLink--when it becomes small--around ipad width");

                leftNavLink = <a onClick={this.sportsCornerPanel.bind(this)} href="javascript:;" className="header-navLink"></a>;
            }
        }
    }
51
xCrZx

Déclarez une variable locale dans le constructeur pour capturer le contexte.

J'ai fait face au même problème en utilisant class className extends React.Component Au lieu de createClass(). Créez une variable dans le constructeur pour résoudre ce problème.

constructor(props) {
    super(props);
    self = this;
}

Utilisez self.props Au lieu de this.props Partout!

1
Naveen

lier la méthode au constructeur a fonctionné parfaitement.

class Example extends Component {

  constructor(props) {
    super(props);
    this.homeButtonClicked= this.homeButtonClicked.bind(this);
  }
}
0
Prashant Yalatwar

Il semble que vous manquiez peut-être d'une méthode getDefaultProps sur votre composant React. Vous pourriez envisager quelque chose de générique, juste pour annuler l'erreur et voir ce qui se passe d'autre:

getDefaultProps () { return {}; }

0
balanceiskey