Блог

Я пытаюсь рефакторинговать простой код с жестко заданным начальным состоянием, но я новичок в реагировании на крючки.

 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>
  );
}
 

У меня проблема с переписыванием начального состояния с помощью крючков.

Вы используете функциональный компонент, поэтому вы можете использовать только крючки. 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 timers={timers}/> .