3

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

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) Object.putListener (EventPluginHub.js:143) で Object.putListener (ReactDOMComponent.js:176) で CallbackQueue.notifyAll (CallbackQueue.js:76) で ReactReconcileTransaction.close (ReactReconcileTransaction.js:80) で ReactReconcileTransaction.closeAll (Transaction .js:206) 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) で ReactCompositeComponentWrapper.unmountComponent (ReactCompositeComponent.js:418) で Object.unmountComponent (ReactReconciler.js:79) で Object.unmountChildren (ReactChildReconciler.js:146) で ReactDOMComponent.unmountChildren (ReactMultiChild.js) :373) ReactDOMComponent.unmountComponent (ReactDOMComponent.js:974) で Object.unmountComponent (ReactReconciler.js:79) で

この動的ページでは、@gallery{Id}@ の部分をコンポーネントの react-image-gallery に置き換える生の html を取得しました。私は2つのギャラリーを持っている動的パスでうまく機能し、サーバー側のナビゲーションとページのリロードを使用しているため、問題を解決できません。しかし、同じ動的コンポーネントを使用する特定の動的パスでは、リロード時にのみこのエラーが発生します。つまり、リンクをコピーして貼り付けてこのページに即座にアクセスすると、このエラーが発生します。inspect を使用すると、わかります

<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>

これは、追加するギャラリーが増える（データが増える）ために発生すると思います。問題は、レンダリングするオブジェクトの配列を取得するとき、サーバー側のナビゲーションでそこに移動するときとページをリロードするときが同じであることです。これを行うことで配列を取得しています。

children = parts.map((item, index) => {
        if (typeof item === "string") {
          return <div key={index} dangerouslySetInnerHTML={{ __html: item }} />
        } else {
          return <div key={index}>{item}</div>;
        }
      })
4

5 に答える 5

0

React 15.6 で SSR を使用し、構造化されていない HTML でこの問題を解決しました

<div>
 {isValid
  ?<div>
     {value1}
   </div>
  :{value2}
 }                 
</div>

value2 をワープした後<div>:

<div>
 {isValid
  ?<div>
     {value1}
   </div>
  :<div>
    {value2}
   </div>
 }                 
</div>

エラーがなくなりました

于 2020-04-21T05:24:02.307 に答える