nie można odczytać własności „getHostNode” null

Question

Mam horyzont/reagują aplikację z reagują routera i mam prosty przycisk w mojej aplikacji:

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

Po kliknięciu na niego, pojawia się następujący wyjątek:

Uncaught TypeError: Cannot read property 'getHostNode' of null 

błąd pochodzi z:

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

jakiś pomysł, dlaczego ja się tym?

Answer 1

Miałem do czynienia z podobnym problemem. Okazuje się, że w moim przypadku był highlighthjs usuwając komentarze z wygenerowanego domu.

Dla tekstu, reagują 15 jest dodanie komentarza z reactid zamiast znacznika przęsła, na przykład:

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

możesz spróbować coś takiego?

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

wymusi wygenerowany DOM obejmować span z odpowiednią atrybutu data-reactid.

Mogę zgłosić problem z routerem reagowania, może mogą to zrobić wewnętrznie, więc nie będziesz musiał się tym przejmować. Ale są z tym wyzwania, ponieważ dziecko Link może być w zasadzie wszystkim.

Answer 2

Mam podobny problem.

Próbowałem ręcznie zaktualizować niektóre wtyczki z node_modules, a gdy przywróciłem go z powrotem, otrzymałem ten błąd

Rozwiązałem to przez usunięcie node_modules i uruchomienie instalacji NPM.

Answer 3

Wiele razy spotkałem się z tym problemem w ciągu kilku ostatnich dni (nowe reagowanie), aw prawie wszystkich przypadkach wystąpił błąd składni/kodu, który nie został nigdzie indziej przechwycony. Jeden przykład: Jeśli piszesz:

getInitialState() { 
    showModal: false 
}, 

zamiast:

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

otrzymasz ten błąd. Jest tak, chyba że proces budowania nie złapał już błędu. Mam nadzieję, że to pomogło komuś (lub sobie w ciągu kilku dni Hi Niyaz, you are welcome!).

Answer 4

Dla mnie jest to literówka, która powoduje importowanie komponentu z niewłaściwego modułu.

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

powinno być

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

Answer 5

Bardzo ciekawy :) dla mnie okazało się, że byłem spożywania rekwizyty nieprawidłowo w składniku dziecięcej. Może być pomocny dla kogoś.

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>) 
} 

Answer 6

Po prostu musiałem zrestartować mój backend nodemon.

Answer 7

jeśli się błąd jak „getHostNode” null to jest to błąd związany starego kodu, który został napisany przed i chodzi z aktualizacją wersji z reagują

mamy dwa sposoby rozwiązania tego samego 1) imię musimy odinstalować reagować z projektu i niż ponownie zainstalować reagować z określoną wersją (stara 15.4.2) obecna wersja reaguje 15.6.1 2) Drugi sposób jest nieco czasochłonny, ale dla przyszłości aplikacji jest dobry, przejść przez stary kod i błędy obsługi (obsługa błędów przy obietnicach) z prawidłowym sposobem poniżej kilka linków, które pomogą ci dowiedzieć się, co dzieje się za

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

Answer 8

Moim rozwiązaniem jest po prostu usunięcie buforowanych obrazów, plików i plików cookie, jeśli używasz przeglądarki Chrome. Ustawienia -> Prywatność i Zabezpieczenia -> Wyczyść dane przeglądarki -> Kopia obrazu i pliki/Cookies i innych witryn dane

Answer 9

Jeśli ktoś znajdzie ten wątek. Dla mnie okazało się to błędem zerowym dla podpory.

generując kod błędu:

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

zerowy roboczy sprawdzany kod:

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

Answer 10

Mam ten błąd podczas próby renderowania undefined wartości przez pomyłkę.

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

Rozwiązaniem jest awaryjne null (gdzie jest akceptowana wartość)

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