未知のエラー：要素refが文字列（エディタ）として指定されましたが、所有者が設定されていません

Question

私はreact-markdown-editorパッケージを使用しています。更新後にnpm installと反応すると、この問題が発生します。ページがレンダリングされるとき、このコンポーネントは3つのエラーを生成し、すべてのページが空白になります。私は研究をしていますが、役に立たないものは何も見つかりません私はこれを解決する方法を知らない。ここにクロームのコンソールのエラーがあります：

invariant.js:42 Uncaught Error: Element ref was specified as a string (editor) but no owner was set. You may have multiple copies of React loaded. (details: https: //fb. me/react-refs-must-have-owner). 
    at invariant (invariant.js:42) 
    at coerceRef (react-dom.development.js:8579) 
    at reconcileSingleElement (react-dom.development.js:9379) 
    at reconcileChildFibers (react-dom.development.js:9477) 
    at reconcileChildrenAtPriority (react-dom.development.js:10127) 
    at reconcileChildren (react-dom.development.js:10118) 
    at finishClassComponent (react-dom.development.js:10254) 
    at updateClassComponent (react-dom.development.js:10226) 
    at beginWork (react-dom.development.js:10605) 
    at performUnitOfWork (react-dom.development.js:12573) 

react-dom.development.js:8305 The above error occurred in the <MarkdownEditorContent> component: 
    in MarkdownEditorContent 
    in div 
    in MarkdownEditor (created by TopicEditComponent) 
    in div (created by TopicEditComponent) 
    in div (created by TopicEditComponent) 
    in div (created by TopicEditComponent) 
    in div (created by TopicEditComponent) 
    in form (created by TopicEditComponent) 
    in div (created by TopicEditComponent) 
    in TopicEditComponent (created by TopicComponent) 
    in div (created by TopicComponent) 
    in TopicComponent (created by CountryContainer) 
    in div (created by CountryContainer) 
    in CountryContainer (created by Connect(CountryContainer)) 
    in Connect(CountryContainer) (created by RouterContext) 
    in div (created by CoreLayout) 
    in div (created by CoreLayout) 
    in CoreLayout (created by RouterContext) 
    in RouterContext (created by Router) 
    in Router (created by Routes) 
    in Routes 
    in Provider 
Consider adding an error boundary to your tree to customize error handling behavior. 
You can learn more about error boundaries at https: //fb. me/react-error-boundaries. 


react-dom.development.js:1345 Uncaught Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development. See https: //fb . me/react-crossorigin-error for more information. 
    at Object.invokeGuardedCallbackDev (react-dom.development.js:1345) 
    at invokeGuardedCallback (react-dom.development.js:1195) 
    at performWork (react-dom.development.js:12800) 
    at batchedUpdates (react-dom.development.js:13244) 
    at performFiberBatchedUpdates (react-dom.development.js:1646) 
    at stackBatchedUpdates (react-dom.development.js:1637) 
    at batchedUpdates (react-dom.development.js:1651) 
    at Object.batchedUpdatesWithControlledComponents [as batchedUpdates] (react-dom.development.js:1664) 
    at dispatchEvent (react-dom.development.js:1874) 

Answer 1

今日は同じ問題がありましたが、繰り返し机の上で頭を叩いて解決策を見つけました。

主な問題は、複製されたReactインストールであったため、どちらを使用するかを教えなければなりませんでした。私が見つけた解決策は、このコードwebpack.config.js内部

resolve: { 
    alias: { 
     'react': path.resolve(__dirname, 'path/to/your/react/installation/folder', 'react') 
    } 
} 

を追加することです。

このコードは、適切な反応のインストールが見つかった場所を示しています（私の場合、「node_modules」フォルダを指し示します）。

私は、このソリューションhereを見つけたので、すべてのメリットは「knoxjeffrey」に行く:)

Answer 2

記事によると： Legacy Api String Refs

文字列、参考文献は以下のいずれかで削除される可能性があります将来はそう

を解放し、代わりに使用します。

ref={input => (this.yourView = input)}