如何在反应useEffect中的setInterval内同时执行双重setState答案

【问题标题】：How to perfom double setState at the same time inside setInverval in react useEffect如何在反应useEffect中的setInterval内同时执行双重setState
【发布时间】：2022-08-05 23:22:23
【问题描述】：

我找不到任何答案是堆栈溢出，如果它已经存在，我很抱歉。

我有一个 useEffect 每秒执行一次 object\'js 更新，它包含二维数组的索引。

更新运行良好，但我在为数组执行第二次更新时遇到问题（取决于前一个对象）。

  useEffect(() => {
  let interval = null;  
  if (isActive && isPaused === false) {
    interval = setInterval(() => {
    
    // POSITION 1
    
    setIndexDate((function(indexDate){
        if (indexDate.year + 1 === years.length - 1)
        {
          setIsActive(false);
          setIsPaused(true);
          return indexDate
        }
        else
        {
    
    // POSITION 2
    
          return {
            year: indexDate.events + 1 < years[indexDate.year].events.length ? indexDate.year : indexDate.year + 1,
            events: indexDate.events + 1 < years[indexDate.year].events.length ? indexDate.events + 1 : 0
          }
        }        
    }))
  }, delay);
  } else {
    clearInterval(interval);
  }
  return () => {
    clearInterval(interval);
  };
}, [isActive, isPaused]);

我尝试使用不同的方式来更新我的数组：

我在位置 1 使用了这个：

 const tmp = infoArray
      tmp.unshift(years[indexDate.events + 1 < years[indexDate.year].events.length ? indexDate.year : indexDate.year + 1].events[indexDate.events + 1 < years[indexDate.year].events.length ? indexDate.events + 1 : 0])
      setInfoArray(tmp);

它确实在正确的时间推送，但 indexDate 在这个位置没有更新，所以它总是推送同一个项目。

然后我在 // POSITION 2 中尝试了这个，它确实在正确的时间推送了好项目，但它似乎推送了两次。

我想看看这段代码将在 // POSITION 2 中产生什么：

    setInfoArray((function(infoArray){
  const item = years[indexDate.events + 1 < years[indexDate.year].events.length ? indexDate.year : indexDate.year + 1].events[indexDate.events + 1 < years[indexDate.year].events.length ? indexDate.events + 1 : 0];
  const tmp = infoArray
  tmp.unshift(item)
  return tmp }))

它的工作方式与前一个相同，但推动了同一个对象的 3 次。

因此，我尝试更改策略并在 indexDate 上使用了另一个 useEffect ，例如：

    useEffect(() => {
  if (indexDate.events >= 0)
  {
    const tmp = infoArray
    tmp.unshift(years[indexDate.year].events[indexDate.events])
    setInfoArray(tmp);
  }
         
}, [indexDate]);

它工作正常，但它不是同时在计时器之后推送对象，所以我在更新的对象 indexData 和数组之间有一种延迟。

我正在考虑保留第一个策略并创建一个函数来检查项目是否已经存在以避免推送，但它看起来很脏。

我想我可能错过了解决问题的方法，但找不到解决方案。

感谢您的帮助，祝您有美好的一天。

标签： reactjs setinterval setstate synchronous

【解决方案1】：

欢迎。
对于您的特定用例，您需要做的是在 setIndexDate 挂钩的回调中执行所有需要 indexDate 更新值的代码。这是它的样子：

setIndexDate(val, () => { //use new index date here });

希望对你有帮助，如果有，请采纳，谢谢！

【讨论】：