服务端渲染出现的警告：the checksum was invalid

[fangjf]

我在使用and组件时，尝试了服务端渲染，使用了Menu组件，Chromium输出如下警告：

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) ria-owns="1466038873662_0" aria-haspopup
(server) ria-owns="1466038873358_0" aria-haspopup

组件代码如下：

<Menu mode="inline" defaultSelectedKeys={['1']} defaultOpenKeys={['sub1']}>
    <SubMenu key="sub1" title={<span><Icon type="user" />Filters:</span>}>
        <Menu.Item key="1"><Link to="/">All</Link></Menu.Item>
        <Menu.Item key="2"><Link to="/actived">Actived</Link></Menu.Item>
        <Menu.Item key="3"><Link to="/completed">Completed</Link></Menu.Item>
        <Menu.Item key="4"><Link to="/404">404</Link></Menu.Item>
    </SubMenu>
</Menu>

服务端渲染出来的代码如下：

<ul class="ant-menu ant-menu-inline  ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" tabindex="0" data-reactid="11">
    <li class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu" data-reactid="12">
      <div style="padding-left:24px;" class="ant-menu-submenu-title" aria-open="true" aria-owns="1466038873358_0" aria-haspopup="true" data-reactid="13">
        <span data-reactid="14"><i class=" anticon anticon-user" data-reactid="15"></i><!-- react-text: 16 -->Filters:<!-- /react-text --></span>
      </div>
      <ul class="ant-menu ant-menu-inline  ant-menu-sub" role="menu" aria-activedescendant="" id="1466038873358_0" data-reactid="17">
        <li style="padding-left:48px;" class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="18"><a href="/" data-reactid="19">All</a></li>
        <li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="20"><a href="/actived" data-reactid="21">Actived</a></li>
        <li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="22"><a href="/completed" data-reactid="23">Completed</a></li>
        <li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="24"><a href="/404" data-reactid="25">404</a></li>
      </ul>
    </li>
</ul>

问题分析

服务端渲染出来的id="1466038873358_0"，客户端渲染出的id="1466038873662_0"，貌似这里的id是根据当前时间生成的，导致服务端和客户端生成的id不一致。

本地环境信息

• antd 版本: 1.4.1
• 操作系统及其版本：Ubuntu Kylin 14.04
• 浏览器及其版本: Chromium 50.0.2661.102

[afc163]

试试 1.3.2，如果没问题，那么可能是 #2030 造成的。

[fangjf]

感谢回复，换成1.3.2后，还是出现同样的问题。

[afc163]

帮忙排查吧，我们没有场景可以重现，有明显问题就给 PR 吧~

[afc163]

建议直接给 PR

[afc163]

closed in react-component/menu#55

[lock]

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.