Javascript 设置setInterval和clearInterval的状态时出现问题

我在尝试更新setInterval（）每隔一段时间调用的函数的状态时，从react中发现了意外行为。其目的是使用一个按钮来调用setInterval，该按钮调用从MySQL数据库请求数据的函数，然后将第一个结果数组设置为我的状态。我希望在再次按下时，同样的按钮也能清除间隔。不断地

我注意到，如果注释掉setData函数，代码运行良好。我希望有人能解释为什么在您尝试使用setInterval函数设置状态之前，代码会按预期工作

我猜这与react状态没有立即更新有关，或者甚至可能与aysnc有关？希望有人对正在发生的事情有更好的了解

目前，代码永远不会到达else块，而只是设置另一个调用getData函数的间隔

此代码不在UseEffect钩子中，该按钮有一个OnClick={toggleLive}。此按钮位于Return（）中

const[data，setData]=useState（{}）；
const getData=async（）=>{
const lastEntry=等待API.getLastEntry（“rig08”）；
console.log（lastEntry）；
setData（最后输入[0]| | 0）；
}
var-dataUpdate=null；
const-toggleLive=async（）=>{
console.log（数据更新）；
如果（！数据更新）{
控制台日志（“条件”）；
数据更新=设置间隔（getData，1000）；
}否则{
控制台日志（“其他”）；
clearInterval（数据更新）；
dataUpdate=null；
}
}
返回(
居住
)

---

这是所有相关的代码，如果需要，我可以提供更多。

如果看不到代码的其余部分，很难判断，但我认为发生的情况是您没有正确地保存间隔。调用

setData

将使组件重新启动，每次组件重新启动时，

dataUpdate

将设置为

null

：

var-dataUpdate=null；

处理此问题的一种方法是将

dataUpdate

间隔保存为

ref

-

const dataUpdateRef = React.useRef(null);
const toggleLive = async () => {
  console.log(dataUpdate);
  if (!dataUpdateRef.current) {
    console.log("Condition");
    dataUpdateRef.current = setInterval(getData, 1000);
  } else {
    console.log("Else");
    clearInterval(dataUpdateRef.current);
    dataUpdateRef.current = null;
  }
}

---

对于以后可能看到这一点的任何人来说

---

问题是我没有正确地保存间隔。我把Gerrod的答案用在了useRef上，效果不错。为大家干杯。

这是在

useffect

hook中发生的吗？你能分享更多的代码吗？我想你的代码永远不会转到else块并调用

clearInterval

。如果是这样，那么您需要使用

useState

来存储

dataUpdate

的值。我已经进行了编辑以回答您的问题，您是对的，当我尝试使用setData（lastEntry）设置状态时，代码从未到达else块，但是当我注释掉它时，代码会像我输入的一样工作。

const dataUpdateRef = React.useRef(null);
const toggleLive = async () => {
  console.log(dataUpdate);
  if (!dataUpdateRef.current) {
    console.log("Condition");
    dataUpdateRef.current = setInterval(getData, 1000);
  } else {
    console.log("Else");
    clearInterval(dataUpdateRef.current);
    dataUpdateRef.current = null;
  }
}