如何在超时函数中获取更新的useState()值？
在超时函数中获取更新的useState()值可以通过使用闭包来实现。闭包是指函数可以访问并操作其外部作用域中的变量。在React中，useState()返回的是一个包含状态值和更新状态值的数组，我们可以利用闭包来获取和更新这个状态值。
首先，我们需要在组件中定义一个状态值和更新状态值的useState()，例如：
const [count, setCount] = useState(0);然后，在超时函数中，我们可以创建一个闭包来获取和更新这个状态值。闭包可以捕获当前作用域中的变量，并在函数执行时保持对这些变量的访问。
setTimeout(() => {
// 在超时函数中获取更新的useState()值
console.log(count); // 获取当前的状态值
setCount(count + 1); // 更新状态值
}, 1000);在上面的例子中，超时函数中的闭包可以访问和操作count变量，从而获取和更新useState()的值。当超时函数执行时，它会打印当前的状态值，并通过调用setCount()来更新状态值。
需要注意的是，由于闭包会捕获当前作用域中的变量，所以在超时函数中获取的状态值可能不是最新的。如果在超时函数执行之前，组件重新渲染并更新了状态值，闭包中捕获的状态值仍然是旧的。如果需要获取最新的状态值，可以使用useEffect()钩子函数来监听状态值的变化，并在变化时执行相应的操作。
useEffect(() => {
// 在状态值变化时获取更新的useState()值
console.log(count); // 获取最新的状态值
}, [count]);通过在useEffect()的依赖数组中传入count变量，可以确保在count发生变化时，useEffect()中的回调函数会被执行，从而获取最新的状态值。
综上所述，通过使用闭包和useEffect()钩子函数，我们可以在超时函数中获取更新的useState()值。
相关·内容
在同步和异步函数中调用useState钩子的多个set函数时，我经历了不同的行为。
function Test() {
console.log('app rendering starts.');
const [a, setA] = useState(1);
const [b, setB] = useState(11);
const updateState = () => {
console.log('\tupdating a starts.');
setA(2);
consol
浏览 1提问于2021-11-28得票数 6
回答已采纳
2回答
我试图用CodeSandbox ()“复制”我的真实世界项目。我有一个登录表单，当登录时，它使用auth数据设置cookie。当<LoginPage>组件挂载时，它应该检查该cookie，如果存在，它应该重定向回<HomePage>组件。
在我的例子中，它不像预期的那样工作，因为它要等到我在<LoginPage>表单中写东西时才能工作。
根据，navigate()应该作为router <Redirect />组件。
因此，这是项目src文件夹结构：
钢筋混凝土
index.js
组件
页面
家庭
index.js
浏览 3提问于2019-09-20得票数 1
回答已采纳
在下面的代码中，当我单击“增加”两次时，计数会增加2。但是，5秒后，计数会减少1，然后增加2，而不是像预期的那样简单地增加1。这是密码：-
const Counter=()=>{
const [count, setCount]=useState(0)
setTimeout(()=>{
setCount(count+1)
}, 5000)
return(<>
<button onClick={()=>setCount(()=>count+1)}>Increase</button>
<
浏览 7提问于2022-07-17得票数 0
如果仍在加载，则在等待1.5秒后，我将尝试呈现一个加载消息：
useEffect(() => {
setTimeout(() => {
if (loading) setSleepMessage("The server seems to be sleeping. Waking it up, wait a second...");
}, 1500);
}, [loading]);
变量loading是阿波罗钩子返回的布尔状态，setSleepMessage也链接到状态：
import { useQuery } from "@apollo/clie
浏览 4提问于2020-08-13得票数 1
回答已采纳
你好，目前我的问题是，当我单击DeleteButton (在SortableItem组件中找到)时，虽然变异成功，但需要刷新才能显示删除。在运行DeleteButton突变后，最理想的刷新方法是什么？我相信这需要我从RankList组件中更新SortableItem组件中的状态，但是我想知道实现这一目标的最佳方法！
RankList.js
import React, { useContext, useEffect, useRef, useState } from "react";
import gql from "graphql-tag";
import {
浏览 6提问于2020-05-16得票数 0
回答已采纳
在我的UserContext组件中有状态：
var initialState = {
avatar: '/static/uploads/profile-avatars/placeholder.jpg',
markers: []
};
var UserContext = React.createContext();
function setLocalStorage(key, value) {
try {
window.localStorage.setItem(key, JSON.stringify(value));
} catch (errors) {
浏览 2提问于2020-12-15得票数 0
回答已采纳
编辑:请在下面找到我的完整组件代码。在useEffect上没有刷新“数据”状态...这是怎么回事！
我从useEffect中的firebase获取数据。在useEffect中，我使用useState将数据(数组)存储在状态中。我想在我的rfc render方法中使用这个数据，但首先需要减少()它。我试图在原始useEffect (与我获取数据的位置相同)、其他useEffect中，甚至在我的render方法中减少它。这些都不能真正做到。在reduce函数中，累加器参数保持为空。求求你，我真的需要一些帮助。
import React, { useState, useEffect } from
浏览 45提问于2019-05-21得票数 0
我是新的反应(和一般编程)，并遇到了一个问题。我已经创建了这个组件，并使用react-copy-to-clipboard包，onCopy我想复制一个字符串，将copied设置为true，然后在几秒钟后将copied设置为false。当copied是真时，我想要一个带有文本的div，当copied设置为false时，我希望它消失。
我尝试过使用setTimeout，但没有成功，正如您在下面的代码中所看到的那样，我认为它并不像我所希望的那样工作，因为当copied状态再次为false时，JSX不会重新呈现。我曾想过使用承诺，但当我想返回JSX时，我想不出如何做到这一点。
import React,
浏览 1提问于2022-10-21得票数 2
回答已采纳
1回答
import React , {useState, useEffect} from 'react';
const Timer = () =>{
const [timer, setTimer] = useState(120);
const countTimer = () =>{
if(timer <= 0){
localStorage.clear("timer");
console.log("timer less then 0")
浏览 4提问于2021-06-25得票数 1
回答已采纳
2回答
钩子没有反应。
、、、
大家好，这就是我的代码
export default function Billing() {
const classes = useStyles();
const [balance, setBalance] = useState('0.00');
const [upcoming, setUpcoming] = useState('0.00');
const [lastmonth, setLastmonth] = useState('0.00');
const [header, setHeader] = u
浏览 2提问于2021-01-04得票数 0
回答已采纳
3回答
我有一个反应本机待办清单应用程序。任务项由使用useState表示的数组表示，声明如下：
const [taskItems, setTaskItems] = useState([]);
我试图添加一个函数来删除所有的项目，但不是像这个setTaskItems([])那样设置它，它只是一次删除所有的项目，我希望从结尾开始一次删除一个项目，以创建一个更生动的外观。
while(taskItems.length > 0)
{
alert(taskItems.length);
let itemsCopy = [...taskItems];
浏览 13提问于2022-06-27得票数 0
4回答
我有一个具有相当长的onSubmit函数的react类组件，为了保持代码的整洁性，我将其放入另一个文件中。
我试图将类组件转换为函数式组件，将我所有的状态函数和setState函数替换为useState，但现在，我的useState状态更新器在导入的函数中返回未定义的状态。我是否能够使用带有功能组件的导入函数来更新状态？当将函数导入类组件时，该函数运行良好，而我的状态更新程序是setState()；
//Imported function in utils.js
export const loginUser = async function (email, password) {
t
浏览 1提问于2020-09-19得票数 1
回答已采纳
2回答
我使用useEffect实现了自动播放滑雪板(有三张卡)，但是手动的“先前”和“前进”按钮不能正常工作。useState并没有按需要提升值。useState正在改变我无法理解的随机行为的值。一旦我点击前一个或向前箭头滑动幻灯片，它开始非常迅速地改变幻灯片。自动滑块是完美的工作，但我滑动手动比使用改变值出乎意料。如何实现自动和手动(向前和向后箭头)，使我们顺利地改变价值。
import React, { useState, useRef, useEffect } from "react";
import { Card, Grid } from "@material-ui/
浏览 4提问于2021-02-17得票数 1
回答已采纳
我一直试图理解react的useState钩子的工作原理，但是我无法理解它是如何实现的，比如在这个JavaScript代码中。
import React, { useState } from 'react';
function Example() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);
function onClick()
{setCount(2)
}
return (
浏览 6提问于2021-07-29得票数 0
回答已采纳
我可能不完全理解校长，哦，useState钩子，有一个问题，我遇到了几次。
我试图使用没有依赖项的useEffect在组件中设置初始状态，稍后将其与从redux获得的其他变量进行比较。
// get the customer saved in redux
const Customer = useGetCustomer();
const [prevCustomerNumber, setPrevCustomerNumber] = useState(null)
useEffect(() => {
// if there is already customer saved in redux,
浏览 5提问于2020-02-10得票数 0
我注意到，如果我用一个新值重新呈现一个组件，该值用作useState的初始化程序，则返回的值将缓存在以前的呈现中，而不是用新值替换它。我怎么才能避免这种行为？
最起码的例子：
import React, { useState } from "react";
import ReactDOM from "react-dom";
class App extends React.Component {
render() {
return <Test />;
}
}
ReactDOM.render(<App />, docume
浏览 4提问于2021-08-09得票数 0
回答已采纳
1回答
你好，我有一个无限循环的问题。我看过的所有示例都会让循环消失。但是如果我不刷新，它就不会更新我的视图。我希望项目出现时，添加了一些东西。我以为我的例子会起作用，但它不是。我不知道该怎么修 const [ReadBookingTimes, SetBookingTimes] = useState([]);
const [readStatus, setStatus] = useState("");
const getBookingTimes = async () => {
try {
浏览 17提问于2020-11-22得票数 1
回答已采纳
我在React中有各种函数，我需要使用useState更改状态，然后根据新状态是否满足某些条件执行一些操作。
当使用prop=" newpassword“调用handleChange时，它使用useState中的setValues方法来设置newpassword的值。然后使用正则表达式测试评估新密码，如果密码有效，则应将状态变量passwordIsValid设置为true。
const handleChange = prop => event => {
setValues({ ...values, [prop]: event.target.value })
浏览 2提问于2019-11-04得票数 6
回答已采纳
我正试图使用钩子更新我的应用程序的状态，并且很难弄清楚如何访问其中的每一个，以便在完成时使其成为现实。
const [stepCompleted, setStepCompleted] = useState({
stepOne: false,
stepTwo: false,
stepThree: false,
stepFour: false,
stepFive: false,
stepSix: false,
stepSeven: false,
stepEight
浏览 1提问于2019-06-18得票数 0
回答已采纳
6回答
我正试图从输入字段中获得当前值，但单击onclick后，我将获得大比目鱼的预值。这是我的密码
import { React, useState } from "react";
const CompoundIntrest = () => {
const [capitalValue, setcapitalValue] = useState(1000);
const ChangeCapital = () => {
setcapitalValue(capitalValue - 100);
};
const Calculate = () =&
浏览 9提问于2022-05-28得票数 2
我想从一个网站中获取元数据，然后上传到数据库中。网站链接来自表单输入字段。
由于useState更新是异步的，所以提交时的formData对象中还没有数据。
我有什么选择？
正在使用的npm软件包：
const [title, setTitle] = useState("");
const [url, setUrl] = useState("");
const [imgUrl, setImgUrl] = useState("");
const handleSubmit = (e) => {
e.preventDefault(
浏览 4提问于2021-04-07得票数 0
回答已采纳
我的目标是:制作一个定制旋钮。
我正在尝试构建一个自定义旋钮，当我单击它并向上/向下拖动它时，它的值会增加/减少，直到'mouseup‘事件，然后保持在它的当前值。
目前，我正在为'mousemove‘操作使用一个事件侦听器，它的工作方式是应该的，但是组件直到'mouseup’事件发生在组件内才会更新。我想要实现的是，只要你握住鼠标，就会不断地更新，并且在你释放鼠标的那一刻进行更新，甚至是超出了组件的范围。我可能在事件侦听器中的setState时间上犯了一些错误，事件侦听器对我来说是很新的。
我现在的代码是：
import React, {useState} from
浏览 1提问于2022-03-15得票数 1
回答已采纳
2回答
因此，我希望每5秒得到实时价格更新，因此我将递归的setTimeout放入函数中。不幸的是，目前的价格馈送是这样运作的：
在开始控制台的输出是:未定义的和当前的价格在价格变动后的输出是:未定义的，旧的价格，下一个价格变动后的新的当前价格：未定义的，最老的价格，旧的价格，新的当前价格。
为什么它要追加这些值而不是像往常一样覆盖它们？
import React, { useState, useEffect } from 'react';
import TextField from '@material-ui/core/TextField';
import Butto
浏览 3提问于2021-04-08得票数 3
回答已采纳
3回答
在单击start/stop按钮时，我将触发handlePlay函数。handlePlay函数依次触发playBeat函数。理想情况下，播放节拍功能应该是console.log 1222122212221222.，直到我按下按钮停止。现在它给了我111111111111111。，currentBeat的状态没有增加，这是一个问题。，我使用setCurrentBeat将当前节拍与每个渲染增加1，但这似乎没有增加。
看看完整的代码。
function App() {
const [bpm, setBpm] = useState(100);
const [isplaying, setIsPla
浏览 10提问于2022-08-12得票数 2
回答已采纳
3回答
我有这样一段简单的代码：
ReactDOM.render(<Change />, document.getElementById('app'));
function Change() {
const [i, setI] = React.useState(0);
let rnd = 9;
if (i !== rnd) {
setTimeout(() => {
setI(i + 1);
}, 500);
}
React.useMemo(() => {
浏览 4提问于2020-05-17得票数 0
回答已采纳
1回答
在两个密码状态变为相等后，我正在尝试更改错误状态。但是，当我完成输入密码时，更改不执行，它需要再执行一次。
*关于使用onkeyup事件，它是有效的，但我不认为这是一个好的做法。我也尝试过让它成为一个超时函数，但也没有帮助
这是我的功能。
const [password, setPassword] = useState('')
const [password2, setPassword2] = useState('')
const [passError, setPerror] = useState(false)
const handleChange = (ev
浏览 3提问于2021-11-18得票数 1
回答已采纳
2回答
我有一个功能组件，它应该是一个运行的时钟： import React,{useState,useEffect} from 'react';
import 'materialize-css/dist/css/materialize.min.css';
import { parseTime } from '../../Utils/utils'
const MainClock = (props) => {
const [timeString, setTimeString] = useState(parseTime(new Date()
浏览 92提问于2020-11-03得票数 4
回答已采纳
1回答
我有这样的阵列。
我想得到所有的实际尺寸，当选择包装名称时，当从列表中选择实际大小时，应该根据每个实际大小检索订单大小。我怎样才能做到这一点？
const [packing, setPacking] = useState([])
const [sizes, seSizes] = useState([])
更改包装名称
const onChangeMaterialName = async (id, setFieldValue) => {
const { data } = await axios.get(`/packingDetails/${id}`)
consol
浏览 2提问于2021-05-29得票数 0
我想当用户clicks submit button时它应该添加新的object。对于存储在list varaible.It中的给定值，不应该删除旧的objects，只应该添加name Property。
import { useState } from "react";
export default function Add() {
const [todo, addTodo] = useState([{ name: "cat", time: "2 minutes ago" }]);
const [list, setList] = useS
浏览 1提问于2021-09-01得票数 0
回答已采纳
2回答
对于内部状态的对象数组，我有一个问题。我的问题是如何更改对象值，如下面代码中的示例
const [theArrayOfObjects, setTheArrayOfObjects] = useState([
{ color: "blue", shape: "square" },
{ color: "red", shape: "circle" }
]);
我想要的是
[
{ color: "blue", shape: "square" },
{ color:
浏览 7提问于2022-02-04得票数 1
import {useEffect,useState} from 'react';
export default function App() {
const [count,setCount]=useState(0);
const [flag,setFlag]=useState(false);
function increment(){
setCount(prevState=>{
if(flag)
return prevState
return prevState+1;
});
}
useE
浏览 10提问于2022-10-28得票数 1
回答已采纳
1回答
我正在制作一个应用程序，应该是闪现一条信息，表明用户创建成功或失败。我使用的是deno的新框架，它采用了"preact“。Preact本质上是react的最小版本，所以假设我所做的工作在React页面中是一样的。
我的网页代码如下：
// import { useState } from "preact/hooks";
import { useState, useEffect } from "preact/hooks";
import { Handlers, PageProps } from "$fresh/server.ts";
imp
浏览 4提问于2022-09-19得票数 1
回答已采纳
我有一个警报，希望在从列表中添加/删除项后隐藏在超时函数中。
useEffect没有清理超时函数，而是在一个循环中结束。
function App() {
const [item, setItem] = useState({
id: "",
name: "",
});
const [list, setList] = useState([]);
const [isEditing, setISEditing] = useState(false);
const [alert, setAlert] = useState({
a
浏览 2提问于2022-01-21得票数 0
回答已采纳
下面是我的组件： import { useEffect, useState } from "react";
function Com() {
const [x, setX] = useState(0);
useEffect(() => {
//here is some code that I want to run only once.
//edit: bcz I want to creating variable here and access in setInterval
setInterval(() => {
c
浏览 76提问于2021-05-24得票数 0
回答已采纳
1回答
import React, { useState, useEffect, useRef } from 'react';
import styles from './TextAnimation.module.scss';
const TextAnimation = () => {
const [typedText, setTypedText] = useState([
"Welcome to Byc",
"Change your Life"
]);
const [val
浏览 3提问于2020-10-17得票数 0
我正在显示一个待办事项列表，每个待办事项都有一个编辑按钮，触发一个模式。从模式(子组件)中，您可以更新描述并将新的描述发送到数据库。
在父组件中有update和setUpdate钩子。我是通过两个道具发送，以便我可以更改更新值时，单击保存在模式相反。
当在子组件中使用setUpdate时，我期望父组件重新呈现并再次调用axios，这样，当我单击模态中的保存按钮时，todo列表将显示更新的todo。但不起作用。
如果在子组件中使用setUpdate更改update状态，则父组件为什么不重新呈现。
谢谢你的帮助。
显示待办事项的父组件
import axios from "axios
浏览 5提问于2022-01-13得票数 0
回答已采纳
我用的是第17.0.1反应。我想不出以下几点：
如果按钮被多次单击，即使id保持为unchanged.Also，则页面重新呈现，我遇到另一个错误:第25:6行: React缺少一个依赖项：'id‘。要么包含它，要么删除依赖数组Reactive-钩子/详尽的-deps。我猜想此错误是由于在呈现.之外设置了id这一事实所致。
import React, { useState, useEffect } from "react";
import axios from "axios";
function DataFetcing() {
const [post
浏览 2提问于2021-01-31得票数 0
我正在尝试使用钩子(UseState)在ReactJs中实现搜索功能。 我得到的结果是不正确的，因为它只在search_keyword中设置以前键入的字符，而不是在搜索框中设置每个新字符。 例如： 如果我在搜索框中输入"I“，则search_keyword将为”“。 如果我在搜索框中输入" in“，search_keyword将是"I”。 如果我在搜索框中输入"Ing“，search_keyword将是" in”。 诸若此类。您可以在下图中看到它。1) ? 注意:搜索过程不会发生任何变化 2) ? 注意:现在它会搜索init为"I“而不是
浏览 28提问于2020-07-20得票数 1
为什么在单击按钮时未记录更新的计数值。它总是在单击按钮时记录上一次计数值。这是密码-
import { useState } from "react";
export default function App() {
const [count, setCount] = useState(0);
function updateCount() {
setCount(count + 1);
console.log(count);
}
return (
<div className="App">
&l
浏览 7提问于2022-04-08得票数 0
The 赏金5天后到期。回答此问题有资格获得+100声誉奖励。 丹尼正在寻找一个更详细的答案 关于这个问题： 对于useState，它首先使用count in创建一个超时。它通过闭包访问计数值。当我们通过setCount设置一个新值时，组件会重新呈现，但不会更改传递给timeout的值。我们可以使用const count = useRef(0)并传递给timeout count.current。这将始终使用count的最新值。这有帮助吗？ 当我使用类组件时，我有代码： setTimeout(() => console.log(this.state.count), 5000); 当我使用
浏览 106提问于2020-12-11得票数 6
回答已采纳
我使用了一个无状态组件，并通过Axios & useEffect()从API中获取了值，然后我在状态中设置了一个值，但我想在状态中设置response object： import React, { useState, useEffect } from "react";
import axios from 'axios';
export default function Login(props) {
const [email, setEmail] = useState("");
const [password, setPassword
浏览 11提问于2019-12-31得票数 0
回答已采纳
以下示例使用超时记录用户点击，第一次使用useEffect，第二次使用componentDidUpdate
const UseEffectCounter = () => {
const [count, setCount] = useState(0);
useEffect(() => {
setTimeout(() => {
console.log(`You clicked ${count} times`);
}, 3000);
});
return (
<div>
浏览 1提问于2020-12-01得票数 1
我想实时更新setState，但是它给了我困难的时间，因为状态更新是一个异步进程。我可以请求您的帮助，以便我可以更新状态的时间按钮被点击。
这是我的密码：
const [dependentSystems, setdependentSystems] = useState([]);
const getDependentSystems = async() => {
const response = await axios.get('/GETAPI' + selectedSysID.SYSTEMID)
console.log("LIST OF DEPENDE
浏览 6提问于2022-01-20得票数 -1
回答已采纳
我有一个简单的onChange函数，但我有问题。当我第一次更改输入并输入"1“时，我的变量inputOne是返回空字符串：
const [inputOne, setInputOne] = useState('');
const onChange = (e) => {
setInputOne(e.target.value);
console.log(e.target.value); // first changing of input returns 1
console.log(inputOne); // first changing of input
浏览 0提问于2021-04-10得票数 0
回答已采纳
6回答
想知道是否有一种使用useState()更新嵌套对象状态的方法
import React, {useState} from 'react'
const MyComp = () => {
const [colors, setColors] = useState({colorA: 'RED', colorB: 'PURPLE'});
return (
<div>
<span>{colors.colorB}</span>
<button onClick={
浏览 10提问于2019-12-03得票数 2
回答已采纳
我们有一个持久的函数，它有超时异常。
problemid: Microsoft.Azure.WebJobs.Host.FunctionTimeoutException at Microsoft.Azure.WebJobs.Host.Executors.FunctionExecutor+<TryHandleTimeoutAsync>d__35.MoveNext
outerType: Microsoft.Azure.WebJobs.Host.FunctionTimeoutException
outerMessage: Timeout value of 02:00:00 was ex
浏览 21提问于2022-11-30得票数 0
因此，作为学习的一部分，我目前正在将基于类的应用程序转换为函数式应用程序，我在代码中遇到了一些问题，因为我无法在以下上下文中使用回调函数：
class ColorBox extends Component {
constructor(props) {
super(props);
this.state = { copied: false };
this.changeCopyState = this.changeCopyState.bind(this);
}
changeCopyState() {
this.setState({ copied: tr
浏览 1提问于2021-09-08得票数 1
回答已采纳
1回答
我刚开始学习Reactjs，我正在寻找一些关于如何改进以下代码结构的技巧和技巧(目前我只使用示例数据作为不同状态的值)：
import { useState, createContext } from "react"
export const UserContext = createContext()
export const UserProvider = ({ children }) => {
const [uuid, setUuid] = useState("5498cdec-2bfb-455c-adc6-d59825adde71")
浏览 1提问于2021-07-29得票数 0
回答已采纳
2回答
我正在尝试使用socket.io来练习React.js，所以我试图在两个客户机之间发送消息，但是我很难显示这些消息。我想展示过去发送的信息。现在我想把它作为一个数组来做，因为一个状态不起作用。当控制台记录数组时，它会出现在控制台中，但从不呈现出来。
import { useEffect, useState } from "react";
import io from "socket.io-client";
import "./App.css";
let socket;
const CONNECTION_PORT = "localhost
浏览 2提问于2021-10-04得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
