在setInterval中通过setState函数式更新获取状态是否合规？

你的这段代码存在几个明显的问题，不建议继续使用：

• 逻辑冗余且可读性差：你原本的目的是获取最新的state值，但通过setNonce的函数式更新回调来赋值给局部变量，属于绕弯子的写法。熟悉React的开发者看到这段代码会困惑——明明可以直接在回调里使用prevNonce，却多此一举赋值给局部变量。
• 变量重名易混淆：局部声明的nonce和state的nonce同名，虽然作用域不同，但很容易让维护者误解这个变量的来源，增加出错概率。
• 无意义的state更新：你的setNonce回调返回的是prevNonce（因为nonce = prevNonce的返回值就是prevNonce），相当于没有修改state。这种无意义的setState调用虽然不会触发重新渲染（React会跳过值相同的更新），但完全没必要存在，属于无效代码。

正确的写法参考 #

如果你的需求是在setInterval中获取最新的state值，推荐用useRef保存state的最新引用，避免闭包问题：

const [nonce, setNonce] = useState(0);
const nonceRef = useRef(nonce);

// 同步state到ref
useEffect(() => {
  nonceRef.current = nonce;
}, [nonce]);

useEffect(() => {
  const intervalId = setInterval(() => {
    console.log('nonce has the correct value even if got changed:', nonceRef.current);
  }, 10);
  
  // 记得清理定时器
  return () => clearInterval(intervalId);
}, []);

如果你的需求是在setInterval中更新state并同时获取最新值，直接在setNonce的函数式更新回调里使用prevNonce即可：

const [nonce, setNonce] = useState(0);

useEffect(() => {
  const intervalId = setInterval(() => {
    setNonce((prevNonce) => {
      const newNonce = prevNonce + 1; // 这里可以是你的更新逻辑
      console.log('nonce has the correct value even if got changed:', newNonce);
      return newNonce;
    });
  }, 10);
  
  return () => clearInterval(intervalId);
}, []);

内容的提问来源于stack exchange，提问作者0brine