Impossible de lire la propriété 'getHostNode', null

J'ai un horizon/réagir application à réagir routeur et j'ai un simple bouton dans mon application:

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

Quand je clique dessus, j'obtiens l'exception suivante:

Uncaught TypeError: Cannot read property 'getHostNode' of null

L'erreur vient de:

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

Aucune idée pourquoi suis-je cela?

InformationsquelleAutor alexarsh | 2016-08-05
  1. 18

    J'ai été confronté à un problème similaire. Il s'avère que, dans mon cas, était highlighthjs suppression de commentaires générés dom.

    Pour le texte, Réagissent 15 est l'ajout de commentaire avec le reactid au lieu d'une balise span, comme dans:

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

    Pouvez-vous essayer quelque chose comme cela?

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

    Cette force générée DOM pour inclure la durée avec le bon data-reactid attribut.

    Je fichier un problème avec réagissent-routeur, peut-être qu'ils peuvent le faire en interne, de sorte que vous n'aurait pas à se soucier d'elle. Mais il y a des problèmes avec le Lien de l'enfant pourrait être pratiquement n'importe quoi.

    InformationsquelleAutor Alan Souza
  2. 11

    J'ai rencontré ce problème à plusieurs reprises dans les derniers jours (à nouveau pour réagir) et dans presque tous les cas, il y avait une certaine syntaxe/code d'erreur qui n'a pas pris n'importe où ailleurs. Un exemple: Si vous écrivez:

    getInitialState() {
    showModal: false
},

    au lieu de:

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

    vous obtiendrez cette erreur. C'est moins que votre processus de création n'est pas déjà capture de l'erreur. Espérons que cela aide quelqu'un (ou à moi-même dans un couple des jours. Hi Niyaz, you are welcome!).

    InformationsquelleAutor Niyaz
  3. 2

    Pour moi, c'est une faute de frappe qui résultats dans l'importation de composants du mal module.

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

    il devrait être

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

    J'ai juste eu à redémarrer mon nodemon backend.

    InformationsquelleAutor falconsAndFunctions
  5. 2

    Si quelqu'un d'autre trouve ce fil. Pour moi, cela s'est avéré être une erreur nulle pour un prop.

    Code génère l'erreur:

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

    De travail null vérifié code:

    <Menu InventoryCount={this.state.inventoryModel ? this.state.inventoryModel.length : 0} />
    • Juste un conseil: vous pouvez également utiliser <Menu InventoryCount={présent.état.inventoryModel || 0} />
    InformationsquelleAutor Ogglas
  6. 1

    Très intéressant 🙂 pour moi, il s'est avéré que j'était en train de consommer des accessoires de manière incorrecte en composant enfant. Peut être utile pour quelqu'un.

    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>)
}
    InformationsquelleAutor Anil Namde
  7. 1

    si vous arriver d'erreur comme "getHostNode" null ensuite ses une erreur liée à l'ancien code qui est écrit avant et il est livré avec la version mise à jour de réagir

    nous avons deux façons de résoudre le même
    1) il faut d'Abord désinstaller réagir de projet et de nouveau installer réagir avec la version spécifiée( ancien 15.4.2) la version actuelle de réagir est 15.6.1
    2) la Deuxième façon est un peu fastidieuse, mais pour l'avenir de l'application de sa bonne , passer par l'ancien code et gérer les erreurs(erreur de manipulation de promesses ) avec la manière correcte voici quelques liens qui vous aideront à comprendre ce qui est derrière

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

    • Si "désinstaller" ne fonctionne pas, essayez de supprimer "réagir" et "réagir-dom" dossiers de node_modules et exécuter "npm install".
    • Elle peut aussi se manifester comme "non Gérée Rejet (Invariant Violation): Tentative de mise à jour de la composante xxx qui a déjà été démonté (ou de l'échec du montage)."
    InformationsquelleAutor Developer
  8. 1

    J'ai eu cette erreur en essayant de rendre undefined valeur par erreur.

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

    Le correctif est pour revenir à la valeur null (où est la valeur acceptée)

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

    J'ai eu le même problème.

    J'ai essayé de mettre à jour manuellement un plug-in à partir de node_modules, et quand je suis revenue en arrière, j'ai eu cette erreur.

    Je l'ai résolu en supprimant node_modules et l'exécution de NPM install.

    InformationsquelleAutor Nikola Lukic
  10. 0

    Dans mon cas Réagir n'était pas dans le champ d'application du fichier.

    Si vous importez une variable qui a jsx à partir d'un autre fichier qui n'a pas de réagir importés en elle.

    import React from "react";

    À l'aide de la suite eslint plugin permettrait d'éviter cela: react-in-jsx-scope

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

    InformationsquelleAutor Katti
  11. -1

    Ma solution est de simplement effacer le cache des images, des fichiers et les cookies si vous utilisez le navigateur Chrome. Paramètres -> Confidentialité et sécurité -> Effacer les données de navigation -> image de Cache et les fichiers de Cookies et autres données de site

    Impossible de lire la propriété 'getHostNode', null

    InformationsquelleAutor Ikwhan Chang