ReactJS：校验和无效

Question

我收到此错误，因为服务器为未经过身份验证的用户呈现了webapp的版本，这意味着某些UI元素不存在。客户端检索本地存储的用户令牌，然后自动身份验证发生，客户端呈现略有不同的DOM。逻辑还可以，对吗？但是如何让这个错误停止弹出？

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) d=".c4gd6urcw.2.0"><noscript data-reacti
 (server) d=".c4gd6urcw.2.0"><div data-reactid=".c

Answer 1

您可以使用cookie来存储令牌，以便服务器可以读取它们并在那里处理身份验证。或者，如果您将其保留在LocalStorage中，只要在处理登录的初始化之后触发辅助渲染，它就应该满足React。警告是它必须重新呈现整个应用程序，因为校验和不匹配。也许是这样的？

componentDidMount() {
  // this is only called client side after the server render
  if (localStorageHasToken) {
    handleAuth()
  }
}

目标只是使初始客户端渲染与服务器最初发送的匹配。在新进程中抛出身份验证应确保初始校验和匹配，然后其余部分只是基本的React重新呈现。