web-dev-qa-db-fra.com

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

J'ai une application Horizon/Réaction avec un routeur de réaction et un simple bouton dans mon application

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

Lorsque 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();
},

Une idée pourquoi je reçois ça?

javascriptreactjsreact-router
33
alexarsh

Je faisais face à un problème similaire. Il s’est avéré que, dans mon cas, c’était Highlighthjs qui supprimait les commentaires du dom généré.

Pour le texte, React 15 ajoute un commentaire avec le réactif au lieu d’une balise span, comme dans:

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

Pouvez-vous essayer quelque chose comme ça?

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

Cela forcera le DOM généré à inclure l'étendue avec l'attribut data-reactid approprié.

Je voudrais déposer un problème avec react-router, peut-être qu'ils peuvent le faire en interne afin que vous n'ayez pas à vous en préoccuper Mais cela pose des problèmes, étant donné que l’enfant Link pourrait être fondamentalement n'importe quoi.

18
Alan Souza

J'ai rencontré ce problème plusieurs fois au cours des derniers jours (nouveau à réagir) et dans presque tous les cas, il y avait une erreur de syntaxe/code qui n'a pas été intercepté 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 construction ne détecte pas déjà l'erreur. J'espère que cela aide quelqu'un (ou moi-même dans quelques jours. Hi Niyaz, you are welcome!).

11
Niyaz

Il me suffisait de redémarrer mon backend nodemon.

2
falconsAndFunctions

Pour moi, c'est une faute de frappe qui entraîne l'importation d'un composant à partir d'un mauvais module.

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

cA devrait etre

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

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

Erreur de génération de code:

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

Code de travail null vérifié:

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

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

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

Le correctif doit être réduit à null (où est la valeur acceptée)

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

si vous obtenez une erreur telle que "getHostNode" de null, il s'agit d'une erreur liée à l'ancien code écrit précédemment et fournie avec la mise à jour de version de react

nous avons deux moyens de résoudre le même problème 1) Nous devons d’abord désinstaller réagir du projet et installer à nouveau avec la version spécifiée (ancienne version 15.4.2). La version actuelle de react est 15.6.1 2) La deuxième manière prend beaucoup de temps, mais pour l’avenir, c’est bon, examinez l’ancien code et gérez les erreurs (gestion des erreurs dans les promesses) avec la bonne façon de suivre quelques liens qui vous aideront à comprendre le retard

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

1
Developer

Très intéressant :) pour moi, il s'est avéré que je ne consommais pas correctement les accessoires dans le composant enfant Cela pourrait ê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>)
}
1
Anil Namde

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

J'essayais de mettre à jour manuellement un plugin à partir de node_modules, et lorsque je l'ai rétabli, j'ai eu cette erreur.

Je l'ai résolu en supprimant node_modules et en exécutant l'installation de NPM.

0
Nikola Lukic

Dans mon cas, React n'était pas dans la portée du dossier.

Si vous importez une variable contenant jsx à partir d’un fichier différent pour lequel aucune réaction n’a été importée.

import React from "react";

Utiliser le plugin eslint suivant éviterait ceci: react-in-jsx-scope

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

0
Katti