반응의 체크섬 오류를 디버그하기 위해 클라이언트 마크 업을 보는 방법

아폴로 그래프 연결 페이지의 동일한 동형 렌더링과 체크섬 오류가 있습니다. 어떻게 차이점을 디버깅 할 수 있도록 클라이언트 마크 업을 볼 수 있습니까? 클라이언트 측과 서버 측에서 렌더링이 다른 방식을 추적하는 다른 팁은 무엇입니까? 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

유일한 추측은 로그인 요소 ("소호"입니다 로그인 시작 페이지의 유일한 때문에) 헤더의 외부 게재되고 있다는 것입니다 ..하지만 그것은 꽤 이상하게 보일 수 있으므로 올바른 추측인지 확신 할 수 없습니다. 따라서 실제로 차이점이 있는지 확인하기 위해 실제 클라이언트 마크 업을 확인하고 싶습니다.

출처

2016-12-18 MonkeyBonkey

소리가 너무 쉽지만 Chrome에 document.body.outerHTML을 쏟아내는 것이 아닙니까?

출처

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 예 내가 그게 전부가 도움이되기를 바랍니다이 별도의 사업부를 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

반응의 체크섬 오류를 디버그하기 위해 클라이언트 마크 업을 보는 방법

답변

관련 문제