使用setTimeout访问React.js中的状态

在使用React开发不同的应用程序时，我们经常需要处理定时器。setTimeout方法使我们能够在特定时间间隔之后调用一个函数。然而，在React中实现常规的setTimeout可能很困难。为了使应用程序有效运行，我们需要在useEffect钩子中跟踪定时器并清除它们。在setTimeout中使用状态变量有点反直觉。setTimeout不使用状态属性的当前值。

在本文中，我们将看看如何在React组件中的定时器中访问状态属性。

方法：

让我们首先创建一个计数器应用程序，该应用程序显示一个计数器，并有一个按钮来递增它。

创建React应用：

步骤1： 创建一个项目目录，转到终端，并使用以下命令创建一个名为counter的React应用：

npx create-react-app counter

步骤2： 在创建计数器应用程序后，通过键入以下命令切换到新的文件夹counter：

cd counter

项目结构： 我们将修改文件夹并保留我们需要的文件。现在，请确保您的文件结构如下：

使用setTimeout访问React.js中的状态

示例: 遵循以下方法并在react.js中实现:

方法: 创建一个计数器:

useState钩子在功能组件内定义一个状态。计数变量作为状态变量，setCount函数允许我们修改计数。
每次重新渲染组件时，React都会重新生成setTimeout方法，设置新的超时。因此，我们必须使用带有空依赖数组的useEffect钩子，在组件挂载后创建超时。
我们将在setTimeout方法中传递逻辑和延迟参数。
3秒后，计数将被控制台记录。
我们有一个按钮用于递增计数。

index.html: 在项目目录的public文件夹中的index.html文件中包含以下代码。

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1" /> 
    <meta name="theme-color" 
          content="#000000" /> 
    <meta name="description" 
          content="Web site created using create-react-app" /> 
    <title>Counter App</title> 
</head> 
  
<body> 
    <div id="root"></div> 
</body> 
  
</html>

App.js：

import { useEffect, useState } from "react"; 
import './App.css'; 
  
function App() { 
    const [count, setCount] = useState(0); 
  
    useEffect(() => { 
        setTimeout(() => { 
            console.log(count); 
        }, 3000); 
    }, []); 
  
    return ( 
  
        <div className="counter"> 
            <h2>{count}</h2> 
            <button className="btn"
                onClick={() => setCount(count + 1)}> 
                Press to increment the count 
            </button> 
        </div> 
    ); 
} 
  
export default App;

App.css： 将以下代码添加到 App.css 中以样式化计数器应用程序。

.counter { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    border: 4px solid darkGreen; 
    margin: 2rem; 
} 
  
.btn { 
    font-size: 1rem; 
    margin: 1rem; 
    background-color: darkgreen; 
    color: white; 
    padding: 1rem; 
    cursor: pointer; 
    border-radius: 10px; 
}

index.js: 将以下代码添加到 index.js 文件中。

import React from 'react'; 
import ReactDOM from 'react-dom/client'; 
import './index.css'; 
import App from './App'; 
  
const root = ReactDOM.createRoot(document.getElementById('root')); 
root.render( 
    <React.StrictMode> 
        <App /> 
    </React.StrictMode> 
);

运行应用程序的步骤： 使用以下命令运行应用程序：

npm start

输出： 默认情况下，React项目将在 3000 端口上运行。你可以在浏览器中通过 localhost:3000 访问它。

使用setTimeout访问React.js中的状态

我们将观察到，在 3 秒之后，控制台将记录 0 。

解释： 三秒后，0的值将被记录到控制台中。现在，计数器的当前值可能不是0。如果在超时触发之前我们点击按钮两次来增加计数器，控制台应该显示2。

实际上，无论我们更新计数器的次数多少，内联回调实际上是一个闭包函数，它在setTimeout调用时指向计数器的值在其创建时的那一刻。 因此，它将始终显示0。

我们可以通过在应用程序中使用 useRef 钩子来解决这个问题。

在超时中访问状态：

在这个示例中，我们必须在一个对象周围建立一个闭包函数来访问它的当前状态。每次计数器函数执行时，对象的值都会发生变化，而对象的引用保持不变。
使用 useRef 钩子，我们将创建一个引用对象，并将计数器的初始值传递给它。
useRef返回一个具有属性current的对象。
我们将通过访问引用对象的 .current 属性来设置ref值。
countRef.current 指向计数器的当前状态值。

示例2： 将前面的代码替换为以下代码，放在App.js 文件中：

App.js:

import { useEffect, useState, useRef } from "react"; 
import './App.css'; 
  
function App() { 
    const [count, setCount] = useState(0); 
  
    //creating a reference object 
    const countRef = useRef(count); 
    countRef.current = count; 
  
    useEffect(() => { 
        setTimeout(() => { 
  
            //accessing the current state of the counter 
            console.log(countRef.current); 
        }, 3000); 
    }, []); 
  
    return ( 
  
        <div className="counter"> 
            <h2>{count}</h2> 
            <button className="btn"
                onClick={() => setCount(count + 1)}> 
                Press to increment the count 
            </button> 
        </div> 
    ); 
} 
  
export default App;