时间戳

首页 > 解决方案 > 用钩子重构状态

reactjs - 用钩子重构状态

问题描述

我试图用硬编码的初始状态重构简单的代码，但我是 React Hooks 的新手。

const TimersDashboard = () => {
  const [timers, timersChange] = useState(0)


  React.state = {
    timers: [
      {
        id: UUID.v4(),
        activity: 'Testing activity',
        description: 'Lorem ipsum kraf maga',
        elapsed: '0',
        runningSince: Date.now(),
      },
      {
        id: UUID.v4(),
        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={this.state.timers} 
        />
        <NewTimerTool
          isOpen={false}
        />
      </div>    
    </div>
  );
}

我有问题用 Hooks 重写初始状态。

标签： reactjsreact-hooks

解决方案

您正在使用功能组件，您只能使用 Hooks。React.state 仅适用于类组件。如果你希望你的初始 React.state 像这样初始化它

const [timers, setTimers] = useState([
  {
    id: UUID.v4(),
    activity: "Testing activity",
    description: "Lorem ipsum kraf maga",
    elapsed: "0",
    runningSince: Date.now(),
  },
  {
    id: UUID.v4(),
    activity: "Next activity",
    description: "Lorem ipsum kung fu",
    elapsed: "0",
    runningSince: Date.now(),
  },
]);

在 TimersList 中，只需像这样获取 useState 的值 <TimersList timers={timers}/>。

推荐阅读