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

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

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

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

Answer 1

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

Answer 2

您需要这样做：

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

或更妙的是：

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

如何在setInterval中更新状态对象？ [钩子]

2 个答案: