Блог

Главная - Вопросы по программированию - Доступ к предыдущему состоянию функционального компонента с состоянием, являющимся объектом

Доступ к предыдущему состоянию функционального компонента с состоянием, являющимся объектом

#javascript #reactjs #react-hooks #use-state #react-state

#javascript #reactjs #реагирующие хуки #использование-состояние #реагировать-состояние

Вопрос:

Учитывая, что вы можете получить доступ к предыдущему состоянию при изменении текущего состояния, передав функцию стрелки, как в функции секундомера ниже:

 function App() {
   const [time, setTime] = useState(0)

function counter() {
   setTime(prev => prev   1)
}

return (
<div>
 <p>{time}<p>
 <button onClick={counter}>Click Me<button/>
</div>
)

}

Могу ли я сделать то же самое, когда состояние является объектом? Это проблема с синтаксисом, с которой я сталкиваюсь, или это невозможно сделать?
Что мне написать там, где у меня есть вопросительные знаки?

 function App() {
   const [time, setTime] = useState({sec: 0, min: 0, hour: 0})

function stopwatch() {
   setTime(prev??? => ????)
}

return (
<div>
 <p>{time.sec} {time.min} {time.hour}<p>
 <button onClick={stopwatch}>Click Me<button/>
</div>
)

}

```

Комментарии:

1. Просто верните новый объект setTime(prev=>({...prev, hour:prev.hour 1})) . Я просто увеличил час, например … используйте свою собственную логику, чтобы делать то, что вам нужно

2. Спасибо @charlietfl ! Это именно то, что я искал.

3. Я просто хочу указать на небольшую, тонкую, но важную деталь с обновлениями функционального состояния. На самом деле вы получаете доступ к текущему состоянию и возвращаете следующее состояние. Думайте об этом как о сверхлегком «редукторе», вместо (текущее состояние, действие) => следующее состояние, у вас есть (текущее состояние) => следующее состояние.

Ответ №1:

Я думаю, что вам следует попытаться разделить их, поскольку минуты, секунды и часы увеличиваются в разные моменты. Например, если вы хотите внести изменения в протокол, вы можете применить эту логику к объекту

 function App() {
   const [time, setTime] = useState({sec: 0, min: 0, hour: 0})

function stopwatch() {
  setTime(prevTime => {
  return {
     ...prevTime,
     minutes: prevTimes.minutes   1 // or you could directly change it..
  }  
})
}

return (
<div>
 <p>{time.sec} {time.min} {time.hour}<p>
 <button onClick={stopwatch}>Click Me<button/>
</div>
)

}

Эта логика может быть применена к любому количеству изменений, которые вы хотите внести, минуты, секунды и часы, просто часы и т.д.