クライアントのマークアップを表示して反応のチェックサムエラーをデバッグする方法

アポログラフの接続されたページの同形レンダリングでチェックサムエラーが発生しました。どうすれば違いがあるのかをデバッグできるようにクライアントマークアップを表示できますか？サーバー側とクライアント側でレンダリングがどのように異なるかを追跡するその他のヒントはありますか？私がChromeで要素を調べようとすると、サーバーの出力がレンダリングされてクライアントの出力がどう違うかわからないようです。クライアントのマークアップを表示して反応のチェックサムエラーをデバッグする方法

Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server: 
(client) </div></header><div data-reactid="18">Lo 
(server) </div></header><div class="Home-root-2IM

私は切り捨てられ、警告メッセージから作ることができる唯一の推測では、（「LO」で始まるページ上の唯一のものは、ログインであるため）ログイン要素はヘッダの外に表示されているということです..しかしIかなり奇妙に思えるので、それが正しい推測であると確信することはできません。したがって、実際のクライアントマークアップを確認して、それが確かに違いであることを確認したいと思います。

出典

2016-12-18 MonkeyBonkey

音は簡単すぎますが、document.body.outerHTMLをChromeにダンプするだけではありませんか？

出典

2017-01-17 15:27:24

クライアントの出力が何であるかを示していますが、計算されたサーバーとの違いはありません。 – MonkeyBonkey

「クライアントのマークアップを表示することで、違いをデバッグできますか？ :-D（私はあなたが望むものに答えなかったのですぐにこの回答を削除します） –

私はこれについて読む必要があり、私はさまざまな方法で試しました。

これは狂ったように聞こえるかもしれませんが、この方法でうまくいきました。

あなたの反応のマークアップを余分に<div>で囲みます。

const Html = ({ content, state }) => (
    <html lang="en"> 
    <head> 
     <meta charSet="utf-8" /> 
     <meta name="viewport" content="width=device-width, initial-scale=1" /> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossOrigin="anonymous" /> 
     <title>Teaching Framework</title> 
    </head> 
    <body> 
     <div id="content"> 
     <div dangerouslySetInnerHTML={{ __html: content }} /> <--- HERE 
     </div> 
     <div id="footer"> 
     <ul> 
      <li>Footer</li> 
     </ul> 
     </div> 
     <script 
     dangerouslySetInnerHTML={{ __html: `window.__APOLLO_STATE__=${JSON.stringify(state)};` }} 
     charSet="UTF-8" 
     /> 
     <script src={scriptUrl} charSet="UTF-8" /> 
    </body> 
    </html> 
);

もともと、GitHunt例は、私はthatsのに役立ちます願っています。この余分なdiv要素にhttps://github.com/apollostack/GitHunt-React/blob/master/ui/routes/Html.js#L18

を持っていません。

出典

2017-01-28 21:22:58 slorenzo

私は周囲のコンテキストの量を増やすと便利だと分かりました。これが唯一の反応-DOMパッケージ内のコードを変更することによって行うことができます。余談として

diff --git a/node_modules/react-dom/lib/ReactMount.js b/node_modules/react-dom/lib/ReactMount.js 
index bb7d5bf..675a7bd 100644 
--- a/node_modules/react-dom/lib/ReactMount.js 
+++ b/node_modules/react-dom/lib/ReactMount.js 
@@ -499,7 +499,9 @@ var ReactMount = { 
     } 

     var diffIndex = firstDifferenceIndex(normalizedMarkup, rootMarkup); 
-  var difference = ' (client) ' + normalizedMarkup.substring(diffIndex - 20, diffIndex + 20) + '\n (server) ' + rootMarkup.substring(diffIndex - 20, diffIndex + 20); 
+  // Print num lines of leading and trailing context surrounding 
+  var differenceContext = 40; 
+  var difference = ' (client) ' + normalizedMarkup.substring(diffIndex - differenceContext, diffIndex + differenceContext) + '\n (server) ' + rootMarkup.substring(diffIndex - differenceContext, diffIndex + differenceContext); 

     !(container.nodeType !== DOC_NODE_TYPE) ? process.env.NODE_ENV !== 'production' ? invariant(false, 'You\'re trying to render a component to the document using server rendering but the checksum was invalid. This usually means you rendered a different component type or props on the client from the one on the server, or your render() methods are impure. React cannot handle this case due to cross-browser quirks by rendering at the document root. You should look for environment dependent code in your components and ensure the props are the same client and server side:\n%s', difference) : _prodInvariant('42', difference) : void 0;

、patch-packageはnode_modulesでパッケージに変更を加えるために非常に便利なツールです。

出典

2017-12-28 18:19:28

クライアントのマークアップを表示して反応のチェックサムエラーをデバッグする方法

答えて

関連する問題