javascript - 如何在 setInterval 中更新状态对象？[挂钩]

Question

我想知道是否有人有在 setInterval() 函数中合并状态对象的经验。在尝试了一些事情之后，我最终得到了下面的解决方案，但如果有任何关于如何做到这一点的额外输入/提示，我将不胜感激。

---

一些背景：我的代码库开始增长，现在我有多个状态变量。我正在尝试将相关的对象分组到一个对象中，以便更好地控制发生的渲染数量。这些状态变量之一在 setInterval() 函数中更新。

---

我最初只有一个状态：

const [seconds, setSeconds] = useState(10)

const start = () => {
  interval = setInterval(() => {
    setSeconds((seconds) => seconds - 1000);
  }, 1000);
}

但我正在尝试实现类似的东西：

const [timer, setTimer] = useState({ seconds: 10, status: 'initial', count: 0 })

我需要更新这个对象的“秒”属性。首先，我尝试了类似 ... setTimer({ ...timer, seconds: timer.seconds - 1000 });... 之类的东西，它使间隔运行，但“秒”从未从减法中更新。

最终，我实现了以下内容，到目前为止，这似乎可以解决问题：

const start = () => {
  interval = setInterval(() => {
    setTimer((timer) => (timer = { ...timer, seconds: timer.seconds - 1000 }));
  }, 1000);
}

标签： javascriptreactjsreact-hooks

Answer 1

例如，您可以使用Immer，就像在本文中一样。您可以更轻松地设置您的状态。