时间戳

首页 > 解决方案 > 在使用 hooks 实现的 React 组件中，如何从 setInterval 中读取最新的组件状态值？

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

问题描述

使用 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)
}
...

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

标签： javascriptreactjsreact-hookssetinterval

解决方案

目前最干净的解决方案似乎是使用以下方法创建参考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)
}
...

推荐阅读