警告:React 尝试在容器中重用标记，但校验和无效 [英] Warning: React attempted to reuse markup in a container but the checksum was invalid
本文介绍了警告:React 尝试在容器中重用标记，但校验和无效的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试让同构的 Node.js、Express、Webpack、React 应用程序正常工作.我收到以下错误.关于如何修复它的任何建议?
警告:React 尝试在容器中重用标记，但校验和无效.这通常意味着您正在使用服务器渲染并且服务器上生成的标记不是客户端所期望的.React 注入了新的标记来补偿哪些有效，但您已经失去了服务器渲染的许多好处.相反，找出为什么在客户端或服务器上生成的标记不同:(客户端) rgin:0;display:flex;-webkit-align-items:(服务器) rgin:0;display:flex;align-items:center;j警告@warning.js:45ReactMount._mountImageIntoNode @ ReactMount.js:807包装器 @ ReactPerf.js:66mountComponentIntoNode @ ReactMount.js:268Mixin.perform @ Transaction.js:136batchedMountComponentIntoNode @ ReactMount.js:282Mixin.perform @ Transaction.js:136ReactDefaultBatchingStrategy.batchedUpdates @ ReactDefaultBatchingStrategy.js:62批量更新@ ReactUpdates.js:94ReactMount._renderNewRootComponent @ ReactMount.js:476包装器 @ ReactPerf.js:66ReactMount._renderSubtreeIntoContainer @ ReactMount.js:550ReactMount.render @ ReactMount.js:570包装器 @ ReactPerf.js:66(匿名函数)@client.jsx:14(匿名函数)@iso.js:120每个@iso.js:21引导程序@iso.js:111(匿名函数)@client.jsx:12__webpack_require__@bootstrap d56606d95d659f2e05dc:19(匿名函数)@bootstrap d56606d95d659f2e05dc:39(匿名函数)@bootstrap d56606d95d659f2e05dc:39这是服务器最初向浏览器传递的内容:
<html lang=""><头><title>我的头衔</title><meta name="apple-mobile-web-app-title" content="我的标题" data-react-helmet="true"/><meta name="apple-mobile-web-app-status-bar-style" content="black" data-react-helmet="true"/><meta name="apple-mobile-web-app-capable" content="yes" data-react-helmet="true"/><meta name="mobile-web-app-capable" content="yes" data-react-helmet="true"/><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" data-react-helmet="true"/><meta name="description" content="我的描述."data-react-helmet="true"/><meta http-equiv="X-UA-Compatible" content="IE=edge" data-react-helmet="true"/><meta charset="utf-8" data-react-helmet="true"/><link rel="stylesheet" href="/assets/styles/reset.css" data-react-helmet="true"/><link rel="stylesheet" href="/assets/styles/base.css" data-react-helmet="true"/><link rel="stylesheet" href="/assets/styles/Carousel.css" data-react-helmet="true"/><link rel="stylesheet" href="/assets/styles/main.css" data-react-helmet="true"/><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Condensed" type="text/css" data-react-helmet="true"/><link rel="icon" href="/assets/185bb6f691241307862b331970a6bff1.ico" type="image/x-icon" data-react-helmet="true"/>脚本<身体><script src="https://cdn.firebase.com/js/client/2.2.7/firebase.js"></script><script src="https://cdn.firebase.com/libs/reactfire/0.4.0/reactfire.min.js"></script><div class="app"><div class="___iso-html___" data-key="_0"><div data-reactid=".1hkqsbm9n9c" data-react-checksum="794698749"><div data-reactid=".1hkqsbm9n9c.0"><div data-reactid=".1hkqsbm9n9c.0.$=10"></div><div style="position:fixed;z-index:2;top:0;left:0;right:0;height:60px;color:rgb(219,219,219);font-family:mainnextcondensed_ultralight;font-size:17px;overflow:hidden;"data-reactid=".1hkqsbm9n9c.0.$/=11"><div style="position:absolute;left:0;top:0;background-color:rgba(27,27,27,0.92);padding-right:35px;"data-reactid=".1hkqsbm9n9c.0.$/=11.$/=10"><div style="float:left;height:60px;width:13px;border-left:5pxsolid rgb(210,45,164);"data-reactid=".1hkqsbm9n9c.0.$/=11.$/=10.$/=10"></div><div style="float:left;height:60px;width:227px;背景图像:URL(数据:图像/PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAAAOMAAAAhCAYAAAArrhzzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAACxNJREFUeNrsXF9sHEcZHx927MZJvU5cSw4FrxXahja451Q88ADeq5Aq0aKeKyh9oMqdyFNA9PzAY3U2vPDE3SGBxNOdaZHKC3c8FCgqvXP73PjqFiSSIl9oSSTXJOe4juv8M/OTV/F9O57ZP + dzaWF + ysjZ3dmd2dn5ze/7vpm5LtYGFr/0otV7wsrdXr1x8dbl6zV + qj7 + 9nebUZ6xtbXFDAwMWoiFJZ90qjjw7eOp0fJj2XtfeLR6d9Je4nls05wGBu2jO4CENlfABZ7YInsxwU + B + mV77x9Ixg73uHl67xtgR39w0rpWaQAZG6ZJDQw6TEZQw77xo + WRn33Fih3qYQfG7l6Av/2TIwz + euSVHx/+ 5miOE3aam6s106wGBtHR5UPG4vDzj6QOP/750A9be/mf7Mqv/PA/tbwxG + RDGp/RwCAEGTkRU + AXgin6uV8/yrpHDoZ + 4J0Pb7LlH79Z/+ idK43Dj486zRfOpzkxK4aMBgYRyciJGOd/qjy5QZtjv/wqu + vUUNsF/PsXf21yQiY4IeuGjAYGIX1GjJoWBRFBEVVE3Di3wtZfv8RunF9loJ79Xzum9CUBR7//kHV7eaPM/cmJqNMfXV1dofJhveN46JlmwcHFfR/jzxp8asjIkSOdWklE8AuXf/Km59z6/GUWy/ewI2e + YAA + c3zXPUM/ethee + U9MH3z +/QeZZ4c/D9EfWtIRAdVPtBHNjD4xJAR/cQUvdgz0u/JfOvy9V1E3PEV126yldwi2zzfZMPPP + K59uGr/wKlquzHC/B6zxAiympZNp + 4S + Duhc3/2MIK4dZL09Sxg2REUy5HFXGQq1zQXUr8r8NuXx8bwdIpVC10ySPX/szJBm0w4yijsJqAYXOk/rBNyuBegtV7DB2BtEQ3yawvWMYZYSHzomToGowX + iLA1us7 + RwK0iTPsX6vzHs8S/XX7 + 8c3zo6/daHVSrJHZegYoUhLIU59vFpGh4JA6YKrOYmholzRIigulaArOUJ + goY1ivmuiM2Elr + GEthbln0 + 8TBUiOKWyTXJuDHsOBSIc0aXsZBTKg0PcS/aESQMbnUCzgOZaswPicDJq5eU0b7AcRGekDRfm7tYOYymcEvPfsa2wlv8i8pus9JGLD/63f8EZNv3eKsYO3SZT1Uss5HTkI0dYsLyujWHge1TylpgGQ4y3JhGBEyfYKYbLFedmuucpJNYOpoTEpBaZkSwCOeYLzQFKqNHNY96SiMwrrhe2BkHUV2UMEQuKoik2f5wtfOI73yH5rXfFewnyf8ylfWCVzqDwNRYwgSdrv40YDCWn5mKvhySjPLVJlA99v80LLTzw4OUIcyBhb + 8uSNxp0T7 + rmDtZLnh9zMEzJ + yxV5/IwfarPdS5TOoq1EaFqQ6ZxCWigK7Jx9tsCdVZhVHRCTVk1XVoUc5pRWer + AUuQuL3xP/X +FqKlCImP5MGOx3eku6R1dGWfOIwpncW89QI4Ww0vZlUXlT1O616d78gi + a75YlV44QY4LTtHUObPK67efWlVgQVdmjQucf1Py2z1T/8fed4s3GVM7A1lbcpB3zQf + x76IjdpipmiF/rp3z5Tk3wI6HAtMwTUtpIyrjPrc02ie8IdcHOa + 3zqK8KJjQ6XEaFDjMK2Nq6LMVic8tpkLcb9uJ6YcAdaxjf7H9fGFde9PfwNEu4l57 + ALY/OCZE + 7EPpitYukcTmG4W69k3Fi6FinCqJjGqKj2RpJRKSwSUpTUj7x5tntOEd4h4fcu/Foa69RQ + GFTeF1nGlakCGhY5MigUkZVL6DC6NqtqklxKdIrlofBih4XRHETKkXyGWj8TO9MiKCVeE6W1DFBVHwJ63cV + w8QdeJjWqOaD4jDaNu7S + r8RaZZcgQEA/LtBRenXpl98M9PzeAIEZj/7fHfWJL5HPlX6FBZBUFqGsKrTPSmvAcTg0gNaYuWdvuWXI//hS1cqC477/sJXSgeJ/GFT81C8S5FZ1vQZR6aHnd3ZcBCcCCnav + iLxmf + GPpweq30mHJaGDw/wSZjBkWcskUmKVHM + ORfgUAltldOvsGbDKuGzIaGEgBHIU/Ewowoc + JtWvJHAXMT9LdG/KKHAMDA40yRlVHAfo7OUDA7S1UH + wQ0Q3w3GfBTo40RjONmWpgEERGJOQMcIi19t/5AsgmNhOjKborGMK2N + OWiJNtWt/AIIiMEjGTzDtRrQWoI0xtSIsBgIjm1 + EMDPZKxr2Yr6y1n0/1swSm9Q0MCGJhM + Lkt26 + BsxPmLKASCn9uYNEB3f2GxgYZZRMVlj1ICZ9a2x7eVojasFGGQ0M9kBGQkrwHy3ZDzRkNDBoH/8RYAC6QbxY8FBYtQAAAABJRU5ErkJggg==);background-repeat:no-repeat;background-position:center;"data-reactid=".1hkqsbm9n9c.0.$/=11.$/=10.$/=11"></div><div style="display:none;width:0;height:0;边框样式:实心；边框宽度:6px 6px 0 6px；边框颜色:rgb(117,117,117)透明透明透明；-webkit-transform:旋转(360度)；浮动:左；左边距:6像素；边距顶部:26px;"data-reactid=".1hkqsbm9n9c.0.$/=11.$/=10.$/=12"></div></div><div style="position:absolute;top:0px;左:280像素；宽度:340像素；"data-reactid=".1hkqsbm9n9c.0.$/=11.$/=11"><div style="background-color:rgba(27,27,27,0.92);height:10px;"data-reactid=".1hkqsbm9n9c.0.$/=11.$/=11.$/=10"></div><div style="background-color:rgba(53,53,53,0.84);高度:40px;位置:相对;"data-reactid=".1hkqsbm9n9c.0.$/=11.$/=11.$/=11"><div style="position:absolute;top:0;bottom:0;left:0;right:0;padding:0;margin:0;display:flex;align-items:center;justify-content:center;"data-reactid=".1hkqsbm9n9c.0.$/=11.$/=11.$/=11.$=10"><div style="background-image:url('/assets/3bec3e57cb5ee05658440d21984fb7b7.png');background-repeat:no-repeat;background-position:-58px -194px;width:23px;height:22px;position:absolute;top:50%;margin:顶部:-11px;"data-reactid=".1hkqsbm9n9c.0.$/=11.$/=11.$/=11.$=10.$icon"></div></div><div style="位置:绝对；左:40 像素；右:40 像素；顶部:0 像素；底部:0 像素；"data-reactid=".1hkqsbm9n9c.0.$/=11.$/=11.$/=11.$/=12"><input type="text" style="width:100%;height:100%；字体大小:14px；字体系列:mainnext_regular；背景颜色:透明；颜色:#ffffff；"placeholder="搜索艺术家、曲目、专辑" data-reactid=".1hkqsbm9n9c.0.$/=11.$/=11.$/=11.$/=12.0"/></div></div><div style="background-color:rgba(27,27,27,0.92);height:10px;"data-reactid=".1hkqsbm9n9c.0.$/=11.$/=11.$/=12"></div></div><div style="position:absolute;top:0px;left:620px;right:0px;background-color:rgba(27,27,27,0.92);height:60px;line-height:60px;overflow:hidden;min-width:500px;padding-left:10px;"data-reactid=".1hkqsbm9n9c.0.$/=11.$/=12"><div style="position:absolute;top:0px;bottom:0px;right:0px;width:357px;padding-左:141 像素；"data-reactid=".1hkqsbm9n9c.0.$/=11.$/=12.0"><a class="" href="/import" data-reactid=".1hkqsbm9n9c.0.$/=11.$/=12.0.$/=10"><div style="padding-left:40px;position:absolute;left:0px;top:10px;bottom:10px;cursor:pointer;line-height:40px;颜色:RGB(255,255,255)；"data-reactid=".1hkqsbm9n9c.0.$/=11.$/=12.0.$/=10.$import"><div style="position:absolute;top:0;bottom:0;left:0;right:0;padding:0;margin:0;display:flex;align-items:center;justify-content:center;"data-reactid=".1hkqsbm9n9c.0.$/=11.$/=12.0.$/=10.$import.$=10"><div style="background-image:url('/assets/3bec3e57cb5ee05658440d21984fb7b7.png');background-repeat:no-repeat;background-position:0px -194px;width:28px;height:28px;position:absolute;top:0px;%;边距顶部:-14px;"data-reactid=".1hkqsbm9n9c.0.$/=11.$/=12.0.$/=10.$import.$=10.$icon"></div></div><spandata-reactid=".1hkqsbm9n9c.0.$/=11.$/=12.0.$/=10.$import.1">导入播放列表</span></div></a><div style="margin-left:10px;"data-reactid=".1hkqsbm9n9c.0.$/=11.$/=12.0.$admin/=1$admin"><div style="cursor:pointer;float:left;"data-reactid=".1hkqsbm9n9c.0.$/=11.$/=12.0.$admin/=1$admin.$login">登录</div></div></div></div></div></div><noscript data-reactid=".1hkqsbm9n9c.1"></noscript></div></div><div class="___iso-state___" data-key="_0" data-meta="{}" data-state=""{"UserStore":{&;quot;用户":{"经过身份验证的":false,"isWaiting":false}},"SearchStore":{"focused":false,"input":"","timeout":null,"searchRequests":[],"artists":null,"artistsFailed":false,;"artistsLoading":false,"tracks":null,"tracksFailed":false,"tracksLoading";:false,"albums":null,"albumsFailed":false,"albumsLoading":false,";播放列表":null,"播放列表失败":false,"播放列表加载":false,"youtubes":null,"youtubesFailed":false,"youtubeesLoading":false,"soundclouds":null,"soundcloudsFailed":false,"soundcloudsLoading":false},"PlayerStore":{"player":null,"playerSecond":null,"playingTrack":null,"playingTrackSecond":null,"videoId":null,"videoIdSecond":null,"makingPlayingTrackPlayable":false,"radio":false,"startSeconds":0,"current":0,"total":0,"perc":0,"currentSecond":0,"totalSecond":0,"percSecond":0,"playing":false,"playingSecond":false,"secondsListened":0,"secondsListenedSecond":0,"expand":false,";源":null,";tracksQueue":[],"tracksPrevQueue":[],"favorite":false,"random";:false,"repeat":false,"mute":false,"volume":100,";模式":"标准"},"ImportStore":{"url":"","error":false,"focused":false,"loading":false,"已加载":false,"播放列表":null}}""></div><!-- Google Analytics:将 UA-XXXXX-X 更改为您网站的 ID --><!--<脚本>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('创建', 'UA-XXXXX-X', '自动');ga('发送', '浏览量');--><script src="https://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.3/fastclick.min.js"></script><script type="text/javascript">if ('addEventListener' in document) {document.addEventListener('DOMContentLoaded', function() {FastClick.attach(document.body);}， 错误的);}<script type="text/javascript" charset="utf-8" src="/assets/app.js"></script>