无法读取 null 的属性“getHostNode”

Posted 2023-02-21

【中文标题】无法读取 null 的属性“getHostNode”

【英文标题】：Cannot read property 'getHostNode' of null

【发布时间】：2016-12-12 06:58:45

【问题描述】：

我有一个带反应路由器的 Horizo​​n/React 应用程序，我的应用程序中有一个简单的按钮：

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

当我点击它时，我得到以下异常：

Uncaught TypeError: Cannot read property 'getHostNode' of null

错误来自：

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

知道我为什么会得到这个吗？

【问题讨论】：

你在你的组件中做了什么特别的事情吗？我无法使用最新的 React Router 重现它。看来他们正在保留 cmets。查看此代码笔：codepen.io/alansouzati/pen/GqPAmY?editors=001

【参考方案1】：

我遇到了类似的问题。事实证明，就我而言，highlighthjs 从生成的 dom 中删除了 cmets。

对于文本，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 孩子基本上可以是任何东西。

【参考方案2】：

在过去的几天里，我多次遇到这个问题（新的反应），几乎在所有情况下，都有一些其他地方没有发现的语法/代码错误。一个例子：如果你写：

getInitialState() 
    showModal: false
,

代替：

getInitialState() 
    return 
        showModal: false
    ;
,

你会得到这个错误。那是除非您的构建过程尚未捕获错误。希望这可以帮助某人（或几天后我自己。Hi Niyaz, you are welcome!）。

【参考方案3】：

如果其他人发现此线程。对我来说，这对道具来说是一个空错误。

代码生成错误：

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

工作空检查代码：

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

【讨论】：

提示：您也可以使用

【参考方案4】：

对我来说，这是一个拼写错误，导致从错误的模块导入组件。

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

应该是

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

【参考方案5】：

我只需要重新启动我的 nodemon 后端。

【参考方案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>)

【参考方案7】：

如果你得到像“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

【讨论】：

如果“卸载”不起作用，请尝试从 node_modules 中删除“react”和“react-dom”文件夹并运行“npm install”。

它也可能表现为“未处理的拒绝（不变违规）：尝试更新已卸载（或未能安装）的组件xxx。”

【参考方案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>

【参考方案9】：

我也遇到过类似的问题。

我试图从 node_modules 手动更新一些插件，当我恢复它时，我得到了这个错误。

我通过删除 node_modules 并运行 NPM install 解决了这个问题。

【参考方案10】：

在我的情况下，React 不在文件的范围内。

如果您从一个没有导入 react 的不同文件中导入具有 jsx 的变量。

import React from "react";

使用以下 eslint 插件可以避免这种情况：react-in-jsx-scope

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

【参考方案11】：

就我而言，缺少导入。检查你的进口！

【参考方案12】：

如果您使用 Chrome，我的解决方案只是删除缓存的图像、文件和 cookie。设置 -> 隐私和安全 -> 清除浏览数据 -> 缓存的图像和文件/Cookies 和其他站点数据