在使用 hooks 实现的 React 组件中，如何从 setInterval 中读取最新的组件状态值？答案

【问题标题】：In React components implemented with hooks, how can the latest component state values be read from within setInterval?在使用 hooks 实现的 React 组件中，如何从 setInterval 中读取最新的组件状态值？
【发布时间】：2020-09-02 18:20:27
【问题描述】：

使用 React 的基于类的组件，组件的状态值可以从类方法中的 setInterval 中读取，因为组件中其他地方的逻辑会更改状态：

...
constructor(props) {
  super(props);
  this.state = {
    someChangingStateValue: 'initial value'
  }
}
...
// Elsewhere, at random:
this.setState({someChangingStateValue: 'suddenly changed'})
...
_handleLoop() {
  setInterval(() => {
    console.log(this.state.someChangingStateValue)
    console.log("The above line prints the current state value correctly.")
  }, 500)
}
...

但是，这种模式不能与基于钩子的功能性 React 组件一起使用：

...
[someChangingStateValue, setSomeChangingStateValue] = useState('initial value')
...
// Elsewhere, at random:
setSomeChangingStateValue('suddenly changed')
...
const _handleLoop () => {
  setInterval(() => {
    console.log(someChangingStateValue)
    console.log("The above line would always print 'initial value'.")
  }, 500)
}
...

使用这些功能组件实现此目的的最佳方法是什么？

【问题讨论】：

您能否添加您尝试这样做的原因。好像是 XY 问题
状态设置器可以接收一个回调函数来获取当前状态值：setSomeChangingStateValue(currentValue=>) 如果你想改变它然后返回改变的值但是如果你不那么返回你收到的值： setSomeChangingStateValue(currentValue=>{do something with current value; return currentValue;})
这能回答你的问题吗？ React Hooks useState+useEffect+event gives stale state

标签： javascript reactjs react-hooks setinterval

【解决方案1】：

目前最干净的解决方案似乎是使用useRef() 创建引用：

import React, { useState, useRef } from "react";
...
[someChangingStateValue, setSomeChangingStateValue] = useState('initial value')
const someChangingStateValueRef = useRef();
someChangingStateValueRef.current = someChangingStateValue;
...
// Elsewhere, at random:
setSomeChangingStateValue('suddenly changed')
...
const _handleLoop () => {
  setInterval(() => {
    console.log(someChangingStateValueRef.current)
    console.log("The above line prints the current state value correctly.")
  }, 500)
}
...

【讨论】：