以状态为对象访问功能组件的先前状态答案

【问题标题】：Accessing the previous state of a functional component with state being an object以状态为对象访问功能组件的先前状态
【发布时间】：2021-01-14 13:35:03
【问题描述】：

假设您可以在更改当前状态时通过传递箭头函数（如下面的秒表函数）访问先前的状态：

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

}

```

【问题讨论】：

只返回一个新对象setTime(prev=>({...prev, hour:prev.hour+1}))。例如，我只是增加了小时......使用你自己的逻辑来做你需要的事情
谢谢@charlietfl！这正是我想要的。
我只想指出一个小而微妙但重要的细节，包括功能状态更新。您实际上访问当前状态并返回下一个状态。把它想象成一个超轻的“reducer”，而不是（当前状态，动作）=>下一个状态，你已经（当前状态）=>下一个状态。

标签： javascript reactjs react-hooks use-state react-state

【解决方案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>
)

}

此逻辑可以应用于您想要进行的每一次更改，分钟、秒和小时，仅几个小时等。

【讨论】：