Невозможно прочитать свойство 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();
},
Любая идея, почему я получаю это?
Ответы
Ответ 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>
}