使用setTimeout()在React中更新H3标签内容的问题

嘿，刚上手React碰到这种渲染不更新的问题太正常啦！我来给你梳理下React生态里优雅的解决方案，顺便帮你找出之前没生效的原因～

问题根源先理清楚 #

你说控制台里数组在按时更新，但H3标签始终为空，核心原因大概率是没把数组和React的状态（State）绑定。React的UI是状态的「映射」——只有当state/props的引用发生变化时，才会触发组件重新渲染。如果你是直接修改普通变量，或者直接修改state里的原数组（比如用push），React根本感知不到变化，自然不会更新DOM。

方案1：类组件（对应你提到的生命周期写法） #

如果你习惯用类组件，正确的姿势是把数组存在state里，在componentDidMount（你之前拼写的componentHasMounted是笔误哦）中启动定时器，并且用setState更新状态（还要记得清理定时器避免内存泄漏）：

import React, { Component } from 'react';

class DataDisplay extends Component {
  // 初始化状态，存储要展示的数组
  state = {
    dataArray: []
  };

  timerId = null;

  componentDidMount() {
    // 每4秒更新一次数据
    this.timerId = setInterval(() => {
      // 模拟你的数据更新逻辑，这里要创建新数组（不能直接修改原state）
      const newData = [...this.state.dataArray, `新增数据${Date.now()}`];
      // 必须用setState更新状态，React才会触发渲染
      this.setState({ dataArray: newData });
      console.log('更新后的数组:', this.state.dataArray);
    }, 4000);
  }

  componentWillUnmount() {
    // 组件卸载时清除定时器，防止内存泄漏
    clearInterval(this.timerId);
  }

  render() {
    // 把数组转成适合展示的文本，渲染到H3里
    const displayContent = this.state.dataArray.join(' · ');
    return <h3>{displayContent}</h3>;
  }
}

export default DataDisplay;

类组件关键注意点： #

• 绝对不能直接修改this.state里的数组（比如this.state.dataArray.push(xxx)），必须创建新数组（用扩展运算符...、concat、slice等）
• 一定要在组件卸载时清除定时器，否则组件销毁后定时器还会运行，造成内存泄漏

方案2：函数组件+Hook（现在更推荐的简洁写法） #

如果用React 16.8+，用useState和useEffect能写出更简洁的代码，完全替代类组件的生命周期：

import React, { useState, useEffect } from 'react';

const DataDisplay = () => {
  // 用useState定义数组状态
  const [dataArray, setDataArray] = useState([]);

  useEffect(() => {
    // 启动定时器，每4秒更新一次
    const timerId = setInterval(() => {
      // 用函数式更新状态，避免依赖数组的问题
      setDataArray(prevArray => [...prevArray, `新增数据${Date.now()}`]);
      console.log('更新后的数组:', dataArray);
    }, 4000);

    // 清理函数：组件卸载时清除定时器
    return () => clearInterval(timerId);
  }, []); // 依赖数组为空，只在组件挂载时执行一次

  const displayContent = dataArray.join(' · ');
  return <h3>{displayContent}</h3>;
};

export default DataDisplay;

函数组件关键注意点： #

• 用setDataArray的函数式写法（prevArray => [...prevArray, ...]），可以避免把dataArray加到依赖数组里，让定时器只创建一次
• 同样，更新时必须传递新数组的引用，不能直接修改原数组

你之前没生效的可能原因 #

1. 生命周期钩子拼写错误：你提到的componentHasMounted()是错的，正确的是componentDidMount()——如果拼写错误，这个钩子不会执行，定时器根本没启动（不过你说控制台数组在更新，可能只是笔误）
2. 没使用setState更新：直接修改数组（比如this.state.dataArray.push(xxx)），React检测不到状态变化，不会触发渲染
3. 数组存在普通变量里：如果数组没存在state中，哪怕变量更新了，React也不会监听这个变化，自然不会更新DOM

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