webentwicklung-frage-antwort-db.com.de

Die Eigenschaft 'getHostNode' von null kann nicht gelesen werden

Ich habe eine Horizont/React-App mit Reakt-Router und ich habe eine einfache Schaltfläche in meiner App:

<Link className="dark button" to="/">Another Search</Link>

Wenn ich darauf klicke, erhalte ich die folgende Ausnahme:

Uncaught TypeError: Cannot read property 'getHostNode' of null

Der Fehler kommt von:

getHostNode: function (internalInstance) {
    return internalInstance.getHostNode();
},

Irgendeine Idee, warum bekomme ich das?

33
alexarsh

Ich war mit einem ähnlichen Problem konfrontiert. Es stellte sich heraus, dass in meinem Fall highlighthjs Kommentare aus dem generierten dom entfernte.

Bei Text fügt React 15 einen Kommentar mit der Reakti-ID anstelle eines Bereichs-Tags hinzu, wie in:

<!-- react-text: 248-->
Another Search
<!--/react-test-->

Kannst du so etwas versuchen?

<Link className="dark button" to="/"><span>Another Search</span></Link>

Dadurch wird erzwungen, dass das generierte DOM den Bereich mit dem richtigen data-reactid-Attribut enthält.

Ich würde ein Problem mit dem Reakt-Router melden, vielleicht können sie das intern tun, damit Sie sich nicht darum kümmern müssen. Es gibt jedoch Herausforderungen, da das Link-Kind im Grunde alles sein kann.

18
Alan Souza

Ich bin in den letzten Tagen mehrmals auf dieses Problem gestoßen (neu zu reagieren) und in fast allen Fällen gab es einen Syntax-/Codefehler, der nirgendwo anders aufgefangen wurde. Ein Beispiel: Wenn Sie schreiben:

getInitialState() {
    showModal: false
},

anstatt:

getInitialState() {
    return {
        showModal: false
    };
},

sie erhalten diesen Fehler. Das heißt, wenn der Build-Prozess den Fehler nicht bereits abfängt. Hoffe, das hilft jemandem (oder mir selbst in ein paar Tagen. Hi Niyaz, you are welcome!).

11
Niyaz

Ich musste nur mein Nodemon-Backend neu starten.

2

Für mich ist es ein Tippfehler, der dazu führt, dass Komponenten aus einem falschen Modul importiert werden.

import { Link, Icon } from 'react-router';
import { Tag } from 'antd';

es sollte sein

import { Link } from 'react-router';
import { Tag, Icon } from 'antd';
2
syg

Wenn jemand diesen Thread findet. Für mich stellte sich heraus, dass dies ein Nullfehler für eine Requisite war. 

Fehler beim Generieren des Codes:

<Menu InventoryCount={this.state.inventoryModel.length} />

Code mit überprüftem NULL-Code:

<Menu InventoryCount={this.state.inventoryModel ? this.state.inventoryModel.length : 0} />
1
Ogglas

Ich habe diesen Fehler beim Versuch erhalten, undefined aus Versehen zu rendern.

render(){
  let name = this.getName(); // this returns `undefined`
  return <div>name: {name}</div>
}

Die Lösung besteht darin, auf null zurückzugreifen (wobei der akzeptierte Wert ist).

render(){
  let name = this.getName(); // this returns `undefined`
  return <div>name: {name || null}</div>
}
1
Dennis T

wenn Sie einen Fehler wie "getHostNode" von null erhalten, dann handelt es sich um einen Fehler, der sich auf alten Code bezieht, der zuvor geschrieben wurde

wir haben zwei Möglichkeiten, das gleiche aufzulösen 1) Zuerst müssen Sie React aus dem Projekt deinstallieren und Reactor mit der angegebenen Version erneut installieren (alte Version 15.4.2). Die aktuelle Version von Reakt ist 15.6.1 2) Der zweite Weg ist etwas zeitaufwendig, aber für zukünftige Anwendungen ist es gut, den alten Code durchzugehen und Fehler (Fehlerbehandlung von Versprechungen) auf die richtige Art und Weise zu behandeln. Nachfolgend finden Sie einige Links, mit denen Sie herausfinden können, was hinterher läuft

https://github.com/facebook/react/issues/8579https://github.com/mitodl/micromasters/pull/3022

1
Developer

Sehr interessant :) Für mich stellte sich heraus, dass ich Requisiten in der Kindkomponente falsch konsumierte. Könnte für jemanden hilfreich sein.

function Parent(){
    const styleEle = { width: '100px'};
    return (<div>
            <Child styleO={styleEle}/>
        </div>);
}

function Parent(props){
    // here i was directly using <div style={styleO}> causing issue for me
    return (<div style={props.styleO}>
            {'Something'}
        </div>)
}
1
Anil Namde

Ich hatte ein ähnliches Problem.

Ich habe versucht, einige Plugins manuell von node_modules zu aktualisieren, und als ich es zurückgesetzt habe, habe ich diesen Fehler erhalten.

Ich löste es, indem ich node_modules löschte und NPM install installierte.

0
Nikola Lukic

In meinem Fall war React nicht im Umfang der Datei.

Wenn Sie eine Variable mit jsx aus einer anderen Datei importieren, in der der Import nicht reagiert hat.

import React from "react";

Die Verwendung des folgenden eslint-Plugins würde dies vermeiden: react-in-jsx-scope

Quelle: https://github.com/yannickcr/eslint-plugin-react/issues/84

0
Katti