呈现逻辑在生产静态站点中不起作用

Question

以下代码有条件地呈现警告消息，当用户切换站点（通过单击按钮，或直接使用 URL 访问）时，网站将显示警告消息，并在刷新时消失。

在 docusaurus 本地开发服务器中一切正常，但一旦构建到生产静态站点中，行为就会有所不同。

import Cookies from 'js-cookie';
import React from 'react';

import { DocProvider } from '@docusaurus/theme-common/internal';
import { HtmlClassNameProvider } from '@docusaurus/theme-common';
import { translate } from '@docusaurus/Translate';
import CommunityLinkGroup from "@site/src/components/LinkGroup";
import DocItemLayout from '@theme/DocItem/Layout';
import DocItemMetadata from '@theme/DocItem/Metadata';
import styles from "./index.module.css";

export default function DocItem(props) {
  const docHtmlClassName = `docs-doc-id-${props.content.metadata.unversionedId}`;
  const MDXComponent = props.content;

  const url = props.location.pathname;
  const prevEdition = Cookies.get('doc_edition');
  var displayAlert = false;
  if (url.includes('/community/')) {
    Cookies.set('doc_edition', 'community');
    if (prevEdition == 'cloud') {
      displayAlert = true;
    }
  } else if (url.includes('/cloud/')) {
    Cookies.set('doc_edition', 'cloud');
    if (prevEdition == 'community') {
      displayAlert = true;
    }
  }
  var alertMsg = "bad msg";
  var alertClass = "badcls";
  var alertRole = "badrole";
  if (displayAlert == true) {
    alertMsg = translate({
      id: 'theme.DocItem.switchDocAlertMsg',
      message: 'you just switched site, please notice.',
    });
    alertClass = "alert alert--warning";
    alertRole = "alert";
  }
  console.log(alertMsg, alertClass, alertRole);
  return (
    <DocProvider content={props.content}>
      <HtmlClassNameProvider className={docHtmlClassName}>
        <div className={alertClass} role={alertRole}>{alertMsg}</div>
        <DocItemMetadata />
        <DocItemLayout>
          <MDXComponent />
        </DocItemLayout>
        <div className={styles.communityLinkContainer}>
          <CommunityLinkGroup />
        </div>
      </HtmlClassNameProvider>
    </DocProvider>

  );
}

在本地开发服务器中运行良好：

但是一旦构建到生产静态站点中，它就会产生不可能的渲染结果：

同时，生产站点控制台输出显示you just switched site, please notice. alert alert--warning alert，其中明确表示alertMsg=='you just switched site, please notice.', alertClass=="alert alert--warning", alertRole=="alert"，这意味着displayAlert必须是true。

但是如上面的截图所示，displayAlert 看起来好像同时是false 和true，这是一个完全不可能的 DOM 状态。

另外，只有在直接使用URL路径访问时才会出现这种情况，如果我点击网站提供的更改站点的按钮，网站警告消息将通过动态渲染正常显示。

Answer 1

我应该使用状态变量，比如 https://stackblitz.com/edit/react-pcagrw?file=src/App.js，将其视为 React 101。