エラー：ID 275の要素を見つけることができません

Question

動的ページをリロードするとこのエラーが発生します。この動的ページで

Error: Unable to find element with ID 275. at invariant (invariant.js:38) at precacheChildNodes (ReactDOMComponentTree.js:96) at Object.getNodeFromInstance (ReactDOMComponentTree.js:172) at Object.didPutListener (SimpleEventPlugin.js:210) at Object.putListener (EventPluginHub.js:143) at Object.putListener (ReactDOMComponent.js:176) at CallbackQueue.notifyAll (CallbackQueue.js:76) at ReactReconcileTransaction.close (ReactReconcileTransaction.js:80) at ReactReconcileTransaction.closeAll (Transaction.js:206) at ReactReconcileTransaction.perform (Transaction.js:153)

と

Uncaught (in promise) TypeError: Cannot read property 'remove' of undefined at Object.willDeleteListener (SimpleEventPlugin.js:220) at Object.deleteAllListeners (EventPluginHub.js:201) at ReactDOMComponent.unmountComponent (ReactDOMComponent.js:976) at Object.unmountComponent (ReactReconciler.js:79) at ReactCompositeComponentWrapper.unmountComponent (ReactCompositeComponent.js:418) at Object.unmountComponent (ReactReconciler.js:79) at Object.unmountChildren (ReactChildReconciler.js:146) at ReactDOMComponent.unmountChildren (ReactMultiChild.js:373) at ReactDOMComponent.unmountComponent (ReactDOMComponent.js:974) at Object.unmountComponent (ReactReconciler.js:79)

iは成分の反応像ギャラリーと@ @gallery {ID}を用いて部品を交換した生のHTMLを持っています。私は2つのギャラリーを持っているダイナミックなパスでそれがうまくいっているし、サーバー側のナビゲーションとページをリロードするので、問題はできません。しかし、同じダイナミックコンポーネントを使用している特定の動的パスでは、リロード時にのみこのエラーが発生します。つまり、リンクをコピーして貼り付けると、このページに即座にアクセスできます。使用することにより、私は

<div data-reactid="274"> // this is item in children 
    <p>............</p> 
    <div data-reactid="275"></div>//but this is another item in children that for unknow reason nested in data-reactid="274" 
</div> 

を見る検査が、私は

<div data-reactid="274"> 
    <p>............</p> 
</div> 
<div data-reactid="275"></div> 

私は、これは（より多くのデータ）を追加するため、より多くのギャラリーが起こると考えるはずです。 問題は、レンダリングするオブジェクトの配列を取得するときに、サーバ側のナビゲーションを使用してページをリロードするときと同じであることです。私はこれを行うことで配列を取得しています。

Answer 1

これは、dangerouslySetInnerHTMLで設定している無効なHTML構造によるものです。おそらく、閉じられていないタグがあるためです。

Answer 2

cloudflareを使用している場合は、要素の検索に反応するHTMLコメントが削除されるため、HTMLの縮小が無効になっていることを確認してください。

Answer 3

私は他の人を助けるためにこの問題で私自身の経験を共有することになります：私は、子供たちが通過

<Mapbox>{mapLoaded ? children : null}</Mapbox> 

マップlibにとサードパーティを反応させ、レンダリングされたため、私にとっては

を、問題が発生しましたコードはクライアントサイドのみを読み込み、ページがロードされた後にその<canvas>要素を注入できるようにコンテナdiv参照を必要とします。キャンバス用に予約さのdivの外に子供を移動させることにより

は、あなたがDOMを行い、サードパーティ製のlibが使用している場合は、サードパーティ

<div> 
    <Mapbox /> {/* <- this element reserverd for canvas/element injection not handled by react */} 
    {mapLoaded ? children : null} 
</div> 

を介して注入ノードによって中断されることなく、自身の子供をレンダリングすることができた反応し注射すると、いつも子供の外に反応させる方が安全です。