javascript - 图像加载时 React 15.1 中的空取消引用

Question

从 React 0.14 更新到 React 15.1 后，我遇到了一个奇怪的错误:

ReactDOMComponentTree.js:105 Uncaught TypeError: Cannot read property '__reactInternalInstance$wzdyscjjtuxtcehaa6ep6tj4i' of null

似乎来自使用数据 url 埋在页面中的图像的“加载”事件正在导致事件和 react 走上 DOM，当它到达顶部元素时 react 注入(inject)它没有 parentElement 然后尝试访问“空”parentElement 上的成员

简化的应用程序(删节):

class App extends React.Component {    
  render() {
    return <div id="rootcomponent">
      ...
    </div>;
  }
}

ReactDOM.render(<App/>, document.getElementById('app'));

生成的 HTML:

<div id="app">
  <div id="rootcomponent">
    ...
  </div>
</div>

id 为“rootelement”的元素有一个空的 parentElement，这会导致错误。该页面似乎可以正常工作，这让我感到困惑。

堆栈跟踪:

getClosestInstanceFromNode (ReactDOMComponentTree.js:105)
findParent (ReactEventListener.js:39)
handleTopLevelImpl (ReactEventListener.js:68)
Mixin.perform (Transaction.js:136)
ReactDefaultBatchingStrategy.batchedUpdates (ReactDefaultBat…Strategy.js:63)
batchedUpdates (ReactUpdates.js:98)
ReactEventListener.dispatchEvent (ReactEventListener.js:150)

关于纠正这个问题的想法？也许是 react 错误？

Answer 1

我是个笨蛋。

我刚刚注意到我的 javascript 被加载了两次。我还更新了主要版本的 HtmlWebpackPlugin，它改变了一些涉及注入(inject) javascript 的行为。所以它在我的模板中，插件也在注入(inject)它。

从模板中删除该行以便加载一次 JavaScript 后，一切都很好。

这就是我在下午 5 点更新库所得到的。