如何在React应用中无需刷新页面，根据运行状态动态修改<h1>元素的展示文本？

核心需求 #

在React应用中实现无刷新的动态文案切换：

• 应用运行过程会依次经过loading、updating、updated三类状态
• 每类状态对应提前定义好的提示文案，同步展示在页面h1元素中
• 状态变化时自动更新h1的文本，全程不需要刷新页面

现有实现的问题 #

当前代码已经完成了两个基础准备：一是定义好状态和文案的映射对象，二是在组件内声明了代表当前运行状态的变量，但存在两个关键缺失：

1. h1元素的展示文本被硬编码固定为status.loading，完全没有关联已声明的状态变量，无论状态取什么值，h1都只会展示加载中的文案
2. 代表当前状态的变量是写死的常量，没有接入React的响应式更新机制，即便后续修改了变量值，组件也不会自动重新渲染更新页面内容

初始问题代码如下：

import "./styles.css";

// 已定义的状态-文案映射关系
const status = {
  loading: "loading your data",
  updating: "updating your data",
  updated: "your data is updated"
};

export default function App() {
  // 已声明但未被使用的当前状态变量
  const state = "updating";

  return (
    <div className="App">
      {/* 硬编码固定取loading对应的文案 */}
      <h1>{status.loading}</h1>
    </div>
  );
}

修正实现步骤 #

• 第一步：移除h1元素的硬编码取值，直接用当前状态变量作为键，从status映射对象中读取对应文案，也就是将{status.loading}替换为{status[state]}。此时当state值为updating时，h1就会自动展示“updating your data”的对应文案。
• 第二步：为了实现状态动态切换时页面自动更新的效果，将写死的状态常量替换为React状态钩子useState托管的响应式状态，业务流程中修改状态值时，React会自动触发组件重渲染，同步更新h1的展示文本，全程不需要手动刷新页面。

修正后的完整可运行代码参考：

import "./styles.css";
import { useState, useEffect } from 'react';

const status = {
  loading: "loading your data",
  updating: "updating your data",
  updated: "your data is updated"
};

export default function App() {
  // 用useState托管响应式的当前运行状态，初始值为loading
  const [currentStatus, setCurrentStatus] = useState('loading');

  // 模拟实际业务中的状态流转逻辑
  useEffect(() => {
    // 应用启动2秒后，进入数据更新中的状态
    const loadingTimer = setTimeout(() => setCurrentStatus('updating'), 2000);
    // 再过2秒，进入数据更新完成的状态
    const updatingTimer = setTimeout(() => setCurrentStatus('updated'), 4000);
    
    // 组件卸载时清理定时器，避免内存泄漏
    return () => {
      clearTimeout(loadingTimer);
      clearTimeout(updatingTimer);
    }
  }, [])

  return (
    <div className="App">
      {/* 以当前状态为键读取对应文案，随状态变化自动更新展示 */}
      <h1>{status[currentStatus]}</h1>
    </div>
  );
}

内容的提问来源于stack exchange，提问作者chy4242