使用React Hooks与setTimeout无法动态修改背景颜色求助

你的代码无法正常运行的核心问题有三个：

1. 定时器重复创建：React函数组件每次状态更新都会重新执行整个函数体，你在组件顶层写的setTimeout会在每次渲染时被重复创建，导致多个定时器同时触发，颜色切换逻辑彻底混乱。
2. 初始状态无效：状态初始值设为null，渲染时会被转为字符串"null"，这不是合法的CSS颜色值，可能导致初始样式异常。
3. 未清理定时器：组件卸载时如果定时器还在运行，会引发内存泄漏。

修复步骤： #

• 使用useEffect包裹初始化定时器逻辑，通过空依赖数组确保只在组件挂载时执行一次。
• 把状态初始值改为空字符串""或者"transparent"，保证初始样式合法。
• 在useEffect的清理函数中清除所有定时器，避免内存泄漏。
• 优化状态管理：用单个状态变量控制当前激活的信号灯，减少重复状态，让逻辑更简洁。

修复后的代码： #

import { useState, useEffect } from 'react';

function App() {
  // 用单个状态管理当前激活的信号灯，更简洁
  const [currentLight, setCurrentLight] = useState('red');

  useEffect(() => {
    let timerId;

    // 定义信号灯切换逻辑
    const switchLight = () => {
      switch(currentLight) {
        case 'red':
          timerId = setTimeout(() => setCurrentLight('yellow'), 4000);
          break;
        case 'yellow':
          timerId = setTimeout(() => setCurrentLight('green'), 2000);
          break;
        case 'green':
          timerId = setTimeout(() => setCurrentLight('red'), 5000);
          break;
        default:
          break;
      }
    };

    // 启动切换逻辑
    timerId = setTimeout(switchLight, 100);

    // 组件卸载时清理定时器
    return () => clearTimeout(timerId);
  }, [currentLight]); // 依赖currentLight，每次状态变化时重新设置定时器

  return (
    <>
      <div className="container">
        <div className="flexbox-container">
          <div 
            className="flexbox-item flexbox-item-1" 
            style={{ backgroundColor: currentLight === 'red' ? '#FF0000' : '' }}
          ></div>
          <div 
            className="flexbox-item flexbox-item-2" 
            style={{ backgroundColor: currentLight === 'yellow' ? '#FBFF00' : '' }}
          ></div>
          <div 
            className="flexbox-item flexbox-item-3" 
            style={{ backgroundColor: currentLight === 'green' ? '#00FF00' : '' }}
          ></div>
        </div>
      </div>
    </>
  );
}

export default App;

额外说明： #

• 单个状态currentLight替代三个独立的颜色状态，大幅简化了逻辑，也避免了状态不同步的问题。
• useEffect的依赖数组包含currentLight，确保每次信号灯切换后，都会设置对应时长的下一个定时器。
• 清理函数会在组件卸载或依赖变化时清除之前的定时器，彻底避免内存泄漏和逻辑冲突。

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