無法讀取 null 的屬性“getHostNode”

Question

我有一個帶有反應路由器的地平線/反應應用程序，我的應用程序中有一個簡單的按鈕：

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

當我單擊它時，出現以下異常：

Uncaught TypeError: Cannot read property 'getHostNode' of null

錯誤來自：

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

知道為什么我會得到這個嗎？

Answer 1

我面臨着類似的問題。 事實證明，就我而言，是 highlighthjs 從生成的 dom 中刪除注釋。

對於文本，React 15 使用 reactid 而不是 span 標簽添加注釋，如下所示：

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

你能試試這樣的嗎？

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

這將強制生成的 DOM 包含具有正確data-reactid屬性的 span。

我會向 react-router 提交一個問題，也許他們可以在內部完成，這樣你就不必費心了。 但是這存在挑戰，因為 Link 子項基本上可以是任何東西。

Answer 2

在過去的幾天里，我多次遇到這個問題（剛開始反應），幾乎在所有情況下，都有一些語法/代碼錯誤在其他任何地方都沒有發現。 一個例子：如果你寫：

getInitialState() {
    showModal: false
},

而不是：

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

你會得到這個錯誤。 除非您的構建過程尚未捕獲錯誤。 希望這可以幫助某人（或幾天后我自己。 Hi Niyaz, you are welcome! ）。

Answer 3

如果其他人找到這個線程。 對我來說，結果證明這是一個道具的空錯誤。

代碼生成錯誤：

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

工作空檢查代碼：

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

Answer 4

對我來說，這是一個錯字，導致從錯誤的模塊導入組件。

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

應該是

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

Answer 5

我只需要重新啟動我的 nodemon 后端。

Answer 6

非常有趣:) 對我來說，結果是我在子組件中錯誤地使用了道具。 可能對某人有幫助。

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 7

如果您收到類似 null 的“getHostNode”之類的錯誤，那么它是與之前編寫的舊代碼相關的錯誤，並且它帶有 react 的版本更新

我們有兩種方法可以解決相同的問題 1）首先我們必須從項目中卸載 react，然后再安裝指定版本的 react（舊版本 15.4.2）當前版本的 react 是 15.6.1 2）第二種方法有點耗時但是對於應用程序的未來它的好處，請通過舊代碼並以正確的方式處理錯誤（承諾的錯誤處理），以下是一些可以幫助您找出背后運行的鏈接

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

Answer 8

我試圖錯誤地呈現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>
}

Answer 9

我有過類似的問題。

我試圖從 node_modules 手動更新一些插件，當我恢復它時，我收到了這個錯誤。

我通過刪除 node_modules 並運行 NPM install 來解決它。

Answer 10

在我的情況下，React 不在文件的范圍內。

如果您從另一個文件中導入一個具有 jsx 的變量，該文件中沒有導入 react。

import React from "react";

使用以下 eslint 插件可以避免這種情況： react-in-jsx-scope

來源： https : //github.com/yannickcr/eslint-plugin-react/issues/84

Answer 11

就我而言，缺少導入。 檢查您的進口！

Answer 12

如果您使用 Chrome，我的解決方案只是刪除緩存的圖像、文件和 cookie。 設置 -> 隱私和安全 -> 清除瀏覽數據 -> 緩存的圖像和文件 / Cookie 和其他站點數據