Подтвердить что ты не робот

Невозможно прочитать свойство getHostNode 'null

У меня есть приложение horizon/react с реагирующим маршрутизатором, и у меня есть простая кнопка в моем приложении:

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

Когда я нажимаю на него, я получаю следующее исключение:

Uncaught TypeError: Cannot read property 'getHostNode' of null

Ошибка возникает из:

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

Любая идея, почему я получаю это?

4b9b3361

Ответ 1

Я столкнулся с подобной проблемой. Оказывается, в моем случае было highlighthjs, удаляющих комментарии из сгенерированного dom.

В тексте React 15 добавляет комментарий с реадидом вместо тега span, как в:

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

Можете ли вы попробовать что-то вроде этого?

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

Это заставляет сгенерированную DOM включать span с соответствующим атрибутом data-reactid.

Я бы поставил проблему с реактивным маршрутизатором, возможно, они могут сделать это внутри, поэтому вам не придется беспокоиться об этом. Но есть проблемы с этим, поскольку ребенок Link может быть в основном чем-то.

Ответ 2

Я столкнулся с этой проблемой несколько раз за последние несколько дней (новый для реагирования), и почти во всех случаях произошла некоторая ошибка синтаксиса/кода, которая не была поймана нигде. Один пример: если вы пишете:

getInitialState() {
    showModal: false
},

вместо:

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

вы получите эту ошибку. То есть, если ваш процесс сборки еще не поймал ошибку. Надеюсь, это поможет кому-то (или мне через пару дней. Hi Niyaz, you are welcome!).

Ответ 3

Для меня это опечатка, которая приводит к импортированию компонента из неправильного модуля.

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

он должен быть

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

Ответ 4

Мне просто нужно было перезапустить бэкэнд nodemon.

Ответ 5

Очень интересно:) для меня оказалось, что я неправильно использовал реквизит в дочернем компоненте. Может быть полезно для кого-то.

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

Ответ 6

если вы получаете ошибку типа "getHostNode" из null, тогда это ошибка, связанная со старым кодом, который написан ранее, и он поставляется с обновлением версии реакции

у нас есть два пути решения 1) Сначала мы должны удалить реакцию с проекта и снова установить реакцию с указанной версией (старая версия 15.4.2), текущая версия реакции - 15.6.1 2) Второй способ требует много времени, но для будущего приложения его хорошо, пройти старый код и обработать ошибки (обработка ошибок promises) с правильным способом, следующим за несколькими ссылками, которые помогут вам разобраться, что работает за

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

Ответ 7

У меня была аналогичная проблема.

Я пытался вручную обновить некоторый плагин от node_modules, и когда я вернул его обратно, я получил эту ошибку.

Я решил его, удалив node_modules и выполнив установку NPM.

Ответ 8

Мое решение просто удаляет кешированные изображения, файлы и файлы cookie, если вы используете Chrome. Настройки → Конфиденциальность и безопасность → Очистить данные просмотра → Кэшированное изображение и файлы/Файлы cookie и другие данные сайта

enter image description here

Ответ 9

Если кто-то еще найдет этот поток. Для меня это оказалось пустой ошибкой для опоры.

Ошибка генерации кода:

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

Рабочий нулевой проверенный код:

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

Ответ 10

Я получил эту ошибку, пытаясь отобразить значение undefined по ошибке.

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

Исправление - это возврат к null (где принято значение)

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