使用React Hooks重构含硬编码初始状态的组件时如何设置初始状态

数据老陈

2026-10-4

代码问题说明

你目前的代码混用了类组件的状态写法和Hooks写法，存在两处核心错误：

函数组件没有this指向，也不能直接给React.state赋值，这是类组件专属的状态定义逻辑
声明useState(0)时的初始值设置错误，你需要存储的是计时器对象数组，而非数字0，且声明后的状态变量后续没有被使用

修正后完整代码

import { useState } from 'react';
// 注意提前安装uuid依赖：npm install uuid
import { v4 as UUIDv4 } from 'uuid';

const TimersDashboard = () => {
  // 直接将硬编码的初始数组传入useState作为初始值
  const [timers, setTimers] = useState([
    {
      id: UUIDv4(),
      activity: 'Testing activity',
      description: 'Lorem ipsum kraf maga',
      elapsed: '0',
      runningSince: Date.now(),
    },
    {
      id: UUIDv4(),
      activity: 'Next activity',
      description: 'Lorem ipsum kung fu',
      elapsed: '0',
      runningSince: Date.now(),
    }
  ]);

  return (
    <div className='ui three column centered grid'>
      <div className='column'>
        <TimersList
          timers={timers}
        />
        <NewTimerTool
          isOpen={false}
        />
      </div>    
    </div>
  );
}