Question

我的apollo graphQL连接页面的同构渲染出现校验和错误。如何查看客户端标记以便我可以调试差异是什么？任何其他提示，以跟踪服务器端与客户端的呈现方式有何不同？当我尝试使用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

我可以从截断的警告消息中做出的唯一猜测是Login元素出现在标题之外（因为页面上唯一以“Lo”开头的东西是Login）..但我不能确定这是正确的猜测因为它看起来很奇怪。因此，我想用实际的客户端标记进行验证，以确保确实存在差异。

Answer 1

听起来太简单了，但不仅仅是将document.body.outerHTML转储到Chrome中吗？

Answer 2

我不得不读到这个，我尝试了不同的方法。

这可能听起来很疯狂，但这种方式对我来说很好。

将您的React标记包裹在额外的event.target。

中

<div>

最初，GitHunt示例没有这个额外的div https://github.com/apollostack/GitHunt-React/blob/master/ui/routes/Html.js#L18

我希望这会有所帮助。

Answer 3

我发现增加所显示的周围环境的数量很有用。这只能通过修改react-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中的包。

如何查看客户端标记以调试react中的校验和错误

3 个答案: