Vraag Kan eigenschap 'getHostNode' van null niet lezen


Ik heb een horizon / react-app met reactierouter en ik heb een eenvoudige knop in mijn app:

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

Als ik erop klik, krijg ik de volgende uitzondering:

Uncaught TypeError: Cannot read property 'getHostNode' of null

De fout komt van:

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

Enig idee, waarom krijg ik dit?


33
2017-08-05 19:17


oorsprong


antwoorden:


Ik stond voor een soortgelijk probleem. Het bleek dat, in mijn geval, highlighthjs reacties uit de gegenereerde dom verwijderde.

Voor tekst voegt React 15 commentaar toe met de reactid in plaats van een span-tag, zoals in:

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

Kun je zoiets proberen?

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

Hierdoor wordt de gegenereerde DOM gedwongen om de reeks op te nemen met de juiste data-reactid attribuut.

Ik zou een probleem met react-router indienen, misschien kunnen ze dat intern doen, zodat je je daar geen zorgen over hoeft te maken. Maar daar zijn uitdagingen mee aangezien het Link-kind eigenlijk alles kan zijn.


18
2017-08-09 20:04



Ik ben de afgelopen dagen meerdere keren tegen dit probleem aangelopen (nieuw om te reageren) en in bijna alle gevallen was er een syntaxis / codefout die nergens anders werd gepakt. Een voorbeeld: als u schrijft:

getInitialState() {
    showModal: false
},

in plaats van:

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

je krijgt deze foutmelding. Dat is tenzij uw bouwproces de fout niet al oplost. Ik hoop dat dit iemand (of mezelf in een paar dagen) helpt. Hi Niyaz, you are welcome!).


11
2017-10-31 22:51



Voor mij is het een typfout die resulteert in het importeren van een component uit de verkeerde module.

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

het zou moeten zijn

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

2
2018-01-19 01:13



Ik moest gewoon mijn nodemon-backend herstarten.


2
2018-05-22 17:46



Zeer interessant :) voor mij bleek dat ik rekwisieten verkeerd gebruikte in de kindercomponent. Misschien nuttig voor iemand.

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
2018-05-09 17:58



als je een fout als "getHostNode" krijgt van null dan is het een fout gerelateerd aan oude code die eerder is geschreven en het komt met versie-update van reageren

we hebben twee manieren om hetzelfde op te lossen 1) Eerst moeten we de installatie van react van project ongedaan maken en dan opnieuw installeren met de gespecificeerde versie (oude versie 15.4.2). Huidige versie van de reactie is 15.6.1 2) De tweede manier is tijdrovend, maar voor de toekomst van de toepassing is het goed, doorloop de oude code en behandel fouten (foutafhandeling van beloften) met de juiste manier om te volgen zijn enkele links die u helpen te achterhalen wat er achter loopt

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


1
2018-06-27 11:16



Als iemand anders deze thread vindt. Voor mij bleek dit een nulfout voor een prop te zijn.

Fout bij het genereren van code:

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

Null checked code werken:

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

1
2017-07-18 08:44



Ik kreeg deze foutmelding die probeerde te renderen undefined waarde per ongeluk.

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

De oplossing is om terug te vallen op null (waar is de geaccepteerde waarde)

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

1
2017-08-25 10:09