React useState始终落后1步[重复]
基础概念
useState 是 React 中的一个 Hook，用于在函数组件中添加状态管理。它返回一个状态变量和一个更新该状态的函数。当调用更新函数时，React 会重新渲染组件。
相关优势
- 简洁性：使用
useState可以使组件代码更加简洁，避免使用类组件的复杂状态管理。 - 性能优化：React 的更新机制会自动进行浅比较，只有在状态实际发生变化时才会重新渲染组件。
- 易于理解：
useState的使用方式直观，易于理解和维护。
类型
useState 可以接受任何类型的值作为初始状态，包括基本类型（如字符串、数字、布尔值）和复杂类型（如对象、数组）。
应用场景
useState 适用于需要在函数组件中管理状态的场景，例如表单输入、计数器、轮播图等。
常见问题及解决方法
问题：React useState 始终落后 1 步
原因： 这个问题通常是由于在更新状态后立即访问状态值导致的。由于 React 的异步更新机制，状态更新是批量处理的，因此在调用更新函数后，状态并不会立即更新。
解决方法：
- 使用回调函数更新状态：
- 使用回调函数更新状态：
- 在这个例子中，
setCount使用了一个回调函数来获取前一个状态值，确保在更新状态时使用的是最新的值。 - 使用
useEffect钩子： - 使用
useEffect钩子： - 在这个例子中，
useEffect钩子会在count状态更新后执行，确保在回调函数中访问到的是最新的状态值。
参考链接
通过以上方法，可以有效解决 useState 始终落后 1 步的问题。
相关·内容
我做了一个简单的计数器示例，希望通过鼠标单击来控制日志值，但是它总是显示0。怎么才能修好呢？
import "./App.css";
import { useState } from "react";
import { useEffect } from "react";
function App() {
const [num, setNum] = useState(0);
const handler = () => {
console.log(num);
};
useEffect(() => {
浏览 6提问于2022-06-08得票数 0
回答已采纳
我使用FullCalendar在React和需要一个模式弹出时，一个按钮被点击。
我正在经历的问题是，日历的某些元素不会在覆盖层后面褪色，而是完全不透明，在模式的前面。
具体来说，在dayGridMonth视图中，元素是组成日历的内部网格、每个单元格中的日期号、事件和当前的突出显示(即所有)。但是，工具栏标题、日期文本和外部边框都按需要隐藏。
在listDay或listWeek视图中，只有工具栏中的活动按钮行为不当。
我尝试过实现一个简单的JS模式，也使用了react-modal。这两个方面都存在这一问题。
import { useState } from "react";
i
浏览 1提问于2021-08-17得票数 0
回答已采纳
1回答
为什么下列代码工作：
import React, { useState } from "react";
但是，当我改变顺序时，这是行不通的：
import { useState }, React from "react";
我收到以下错误。它们似乎是完全相同的命令，只是颠倒了顺序。
作为参考，以下是整个文件：
import React, { useState } from "react";
// import { useState }, React from "react";
import MoviesList from
浏览 3提问于2021-12-11得票数 0
回答已采纳
我有这个React组件 import React, {useEffect, useRef, useState} from 'react';
export default function MyD3(props) {
const [count, setCount] = useState(0);
useEffect(() => {
console.log("first log")
const interval = setInterval(() => {
console.log('This w
浏览 103提问于2021-10-27得票数 0
这段代码工作得很好，每秒钟都会增加计数。
import React, { useEffect, useState } from 'react'
function IntervalHookCounter() {
const [count, setCount] = useState(0)
const tick = () => {
console.log("Called tick")
setCount(prevCount => prevCount+1)
}
useEffect(() => {
c
浏览 4提问于2022-03-22得票数 0
在我问我的问题之前:是的，我确实读过关于这方面的所有其他文章，但我基本上就是卡住了，不知道如何解决这个问题。 所以基本上我的渲染和console.log比我的useState更改慢了一步。在视觉上和功能上最大的问题是动态按钮，它没有正确地启用/禁用。我的代码是： import React, { useState, useEffect } from 'react';
import ApiCalls from "../../classes/apiCallsClass"
import useStyles from "./styles";
impor
浏览 20提问于2019-12-20得票数 0
回答已采纳
我在React FunctionComponent中有如下模式的代码： const MyComponent: React.FunctionComponent<ISomeInterface> = ({ someArray, someFunction }) => {
const [someStateObjVar, setSomeStateObjVar] = React.useState({});
const [isFound, setIsFound] = React.useState(false);
const handleSomeEvent = React.u
浏览 38提问于2020-08-25得票数 1
我正在使用react-dates library，DateRangePicker，并试图在组件呈现时显示日历。 我以为会有react-dates本身支持的道具，但经过一个小时的搜索，我没有找到它。 import React, { useState } from 'react';
import { DateRangePicker } from 'react-dates';
import 'react-dates/initialize';
import 'react-dates/lib/css/_datepicker.css';
浏览 22提问于2020-08-12得票数 1
回答已采纳
我希望我没有重复一个问题。我看过：，尽管我的应用程序运行得很好，但它只是流中的一个错误：
Cannot import `useState` because there is no `useState` export in `react`.
4| import { useState } from 'react';
我使用16.7.0-alpha作为我的react和react依赖项：
"dependencies": {
...
"react": "^16.7.0-alpha",
"react-
浏览 1提问于2018-11-01得票数 3
回答已采纳
const Hello = () => {
const [v, setV] = React.useState(1);
React.useEffect(() => {
setTimeout(async () => {
await setV(2);
doSomethingWithData(v)
}, 3000)
}, []);
return (
<div>
<h1>
浏览 4提问于2021-12-17得票数 1
回答已采纳
我尝试使用AsyncStorage将任务保存在我的ToDo应用程序中，以便在应用程序重启后可以检索它们。 到目前为止，我已经设法保存了任务。但是，在第一次运行时总是保存一个空数组。如果我想创建一个新任务，它只会在我第二次单击该按钮时保存它。如果整个过程是异步运行的，那么这是合乎逻辑的。我就是找不出我的错在哪里。如果能得到帮助和提示，我会非常高兴。 在这里，您可以在创建第一个任务时看到空数组：Reactotron Empty Array 在这里，您可以看到get在我创建第二个任务后保存的第一个值：Reactotron AsyncStorage after second click 第一部分：
浏览 29提问于2021-04-27得票数 0
回答已采纳
2回答
响应useState崩溃
、、、、
我试图用ASP.net core 2.1、Typescript 3.2.1、material-ui 3.8.3和React 16.7.0实现一个简单的菜单。当我运行应用程序时，它会与useState一起崩溃，并带有错误TypeError: react__WEBPACK_IMPORTED_MODULE_1___default.a.useState is not a function。
import React from 'react';
import { Link } from 'react-router-dom';
import { withStyles } f
浏览 0提问于2019-01-17得票数 1
回答已采纳
我已经面临这个问题很长一段时间了，这真的很难，我需要帮助。提前谢谢。
下面的代码应该是一个可以在firestore云数据库集合中轻松添加新文档的表单：
import React, {useState} from 'react';
import db from '../index';
const AddSongs = () => {
const [song, setSong] = useState('');
const [artist, setArtist] = useState('');
const
浏览 20提问于2020-02-09得票数 1
回答已采纳
我是react native的初学者。我被卡住了，因为我无法创建一个调用函数delBlogPost的按钮，该函数将删除blogPosts数组中的最后一个元素。我想使用useState钩子来删除元素。如果有人能帮我解决这个问题，那就太好了。代码如下： BlogContext.js import React, {useState} from 'react';
const BlogContext = React.createContext();
export const BlogProvider = ({ children }) => {
const [blogP
浏览 100提问于2021-01-21得票数 0
在这种情况下，我将为子组件发送相同的属性和状态，所以...为什么没有在没有React.memo()的情况下重新渲染，并且这些日志只显示了一次？
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
const Child = ({ num }) => {
const [count, setCount] = useState(0);
return (
<>
{console.log('Child render
浏览 1提问于2020-11-04得票数 0
我现在已经做了一段时间肮脏的JS开发人员了，但是我收到了一个没有任何意义的错误。本质上，编译器似乎在告诉我，我在函数组件或自定义钩子之外使用useState，但是我的组件的TS定义是React.FC，任何帮助理解实际发生的事情都会很好。
nameRandomizer.tsx的全部内容如下：
import React, { useState } from 'react';
const nameRandomizer: React.FC = () => {
const [inputWords, setInputWords] = useState<string>(
浏览 2提问于2020-12-05得票数 0
回答已采纳
1回答
我有以下代码：
function Home() {
const [view_points, setViewPoints] = React.useState(true);
const [view_races, setViewRaces] = React.useState(true);
const [view_wpm, setViewWPM] = React.useState(true);
function handleViewPoints(e) {
setViewPoints(e.target.checked);
}
function handleViewWPM
浏览 3提问于2021-06-18得票数 1
回答已采纳
3回答
我正在构建一个简单的计时器应用程序，并使用钩子跟踪状态中经过的时间。我知道我设置的状态是正确的，因为它每秒都会显示在应用程序中。但是，当我在控制台记录elapsedTime时，它会重复记录初始状态(在本例中为0)：
const Timer = () => {
const [elapsedTime, setElapsedTime] = React.useState(0);
const [totalTime, setTotalTime] = React.useState(0);
const handleStart = () => {
const startTi
浏览 5提问于2021-05-19得票数 0
我跟随this tutorial演示了react的'useCallback‘钩子和React.memo，以防止不必要的函数渲染。为了证明这个概念，我们使用useRef来控制渲染的数量。这只适用于函数，但我添加了一个函数来随机化按钮的背景颜色，并且我似乎无法阻止这两个函数的渲染。 import React,{useState, useCallback, useRef} from 'react';
import './App.css';
const randomColor = () => `rgb(${Math.random()*255},
浏览 21提问于2019-10-18得票数 0
回答已采纳
我试图在使用select-option时实现custom hooks，并在试图在select option中设置默认值时遇到了一个问题。
从来自web的UI中获取的数据中，我能够显示基于类别的selected data (在我的例子中它是美食)。但是，当我选择默认值来显示All数据时，状态不会更新。
另一个问题是关于duplicated values in select option。作为option values，我需要有唯一的值。我想用这种方式来获得独特的价值
<option key={restaurant.id}>{[...new Set(restaurant.cuisin
浏览 1提问于2021-03-07得票数 0
回答已采纳
2回答
组件在每个useState更改的屏幕上得到重复，即使我在useEffect中添加了依赖性。
如何避免安装和cac如何更新现有组件？
我在这里面临着这个问题
我在react应用程序中使用外部库
我在react应用程序中为sparql查询编辑器使用yasgui库--这是用于更新yasqui(yasr)响应结果的代码im
我使用getElementById直接瞄准一个元素
const [result , setResult] = React.useState([])
React.useEffect(( )=>{
var yasr = new YASR(document.get
浏览 2提问于2022-10-13得票数 3
回答已采纳
首先，这是我的代码：
import React, {useState, useEffect} from 'react';
function App() {
const [count, setCount] = useState(0);
useEffect(() => {
const handleKeyUp = (e) => {
if (e.keyCode === 13) {
setCount(count + 1);
}
}
window.document.addEventListener(&
浏览 4提问于2019-11-27得票数 1
回答已采纳
2回答
自定义提取钩子落后一步
、、、、
我正在为get和post数据创建自定义的提取钩子。我遵循官方的React来创建自定义的获取钩子，但是由于useState异步行为，看来我的钩子返回的状态变量落后了一步。这是我定制的useMutation钩子
export const useMutationAwait = (url, options) => {
const [body, setBody] = React.useState({});
const [data, setData] = React.useState(null);
const [error, setError] = React.useState(null
浏览 4提问于2021-11-22得票数 2
我正在尝试将我在编辑器中键入的html内容从编辑器组件(子)获取到父程序，以便将表单和编辑器的内容一起保存到我的数据库中。
我尝试将getContent函数作为支柱发送到编辑器(子)中，并从编辑器中获取内容，但我一直得到显示该getContent is not a function的错误。
正确的方法是什么，这样我就可以将html内容从编辑器获取到父组件了？
Editor.js (儿童)
import { useState } from 'react';
import { Editor } from 'react-draft-wysiwyg';
imp
浏览 1提问于2021-08-07得票数 2
回答已采纳
我刚接触React Native，并且使用youtube来学习教程。
import React, { useState } from 'react';
import { StyleSheet, Text, View, TextInput, Button } from 'react-native';
export default function App() {
const [enteredGoal, setEnteredGoal] = useState('');
const goalInputHandler = (enteredTex
浏览 2提问于2020-04-17得票数 1
1回答
我不知道为什么我的函数循环当我使用useStates，谁能找出问题。
`function Classtab() {
const [userName, setuserName] = React.useState(null)
const [userType, setuserType] = React.useState(null)
const [userEmail, setuserEmail] = React.useState(null)
const [userCourse, setuserCourse] = React.useState([])
const [registere
浏览 1提问于2020-05-05得票数 1
回答已采纳
我是新来的。我的问题在开发人员的反应中可能很常见，还有许多相同的问题，但我仍然不知道如何解决这个问题。我仍然必须单击两次才能更新UI状态。第一次单击只是调用事件处理程序，而不是在状态下更新计数器变量。甚至我也使用了setState()的回调形式，如下所示：
this.setState({ hasButtonBeenClicked: true }, () => {console.log("Clicked")});
Console.log(“点击”)也没有在第一次点击中到达！
App.js
import React, { Component, useState } from
浏览 4提问于2020-10-14得票数 0
回答已采纳
我想知道如何在Reactjs中设置多个useEffect挂钩，以防止查询的重复。
我有DocumentList，它从父变量和变量"page“中获取字符串变量"query”。首先用于从远程api获取文档列表。第二个-设置分页值。这些变量用于获取查询。
请看代码：
import React, { useState, useEffect } from "react"
import axios from 'axios'
import { Link, useLocation } from "react-router-dom";
expor
浏览 7提问于2021-08-09得票数 0
回答已采纳
我只是想弄清楚如何做我的待办事项列表，目前正在尝试添加包含文本输入元素的元素。
这个问题出现在下面的剪辑中：
import { useState } from "react"
function App() {
const [inputVal, setInputVal] = useState('')
const [tasks, setTasks] = useState([])
console.log(inputVal);
return <>
<Input valor = {setInputVal} inputVal={
浏览 3提问于2022-02-20得票数 0
回答已采纳
当我想使用value={tempLogin.login}时，我不能输入我的输入。我做错什么了？我看不到事件、对象和状态中的错误：
var loginInfo = {
login: "",
password: ""
};
const [tempLogin, addTempLogin] = React.useState(loginInfo);
const [logged, setLogged] = React.useState(0);
const newLogin = event => {
loginInfo.login = eve
浏览 4提问于2019-10-16得票数 0
回答已采纳
我刚刚阅读了react的文档，他们给出了这个例子
import React, { useState, useEffect } from 'react';
function FriendStatus(props) {
const [isOnline, setIsOnline] = useState(null);
useEffect(() => {
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
ChatAPI.subscribeToFriendStatus(props.fr
浏览 3提问于2020-03-07得票数 0
1回答
我使用的是java.util.Timer类。我用它来执行重复的任务。(例如，每秒钟检查一次状态的轮询机制)。
timer.scheduleAtFixedRate(new Poller(), 0, pollingInterval);
的问题是:定时器可能落后于。例如，如果他们需要每秒钟执行一次，任务需要2秒才能执行。
文件上说计时器会设法赶上。突然间，如果任务只需执行半秒钟，它就会加快速度。
首先，我想知道，是否有一个内置的方法来检测它是否运行在后面。
但无论如何，我正在寻找一种方法，以禁用追赶行为。如果它落后了，，我只希望它跳过几个周期。
(我还在类似的任务中使用了ScheduledThrea
浏览 0提问于2016-11-17得票数 1
我需要将项连接到存储在React组件状态中的数组。我有一个关于stackblitz的例子，我不明白为什么数组没有增长，因为我使用扩展运算符来添加元素来连接现有的数组。感谢您的任何帮助 链接：https://stackblitz.com/edit/react-usestate-example-ebzt6g?file=index.js import React from 'react';
import { useState, useEffect } from 'react';
import { render } from 'react-dom';
浏览 44提问于2020-04-17得票数 1
回答已采纳
1回答
我有一个使用useContext的React应用程序，而且我在正确输入上下文时遇到了困难。我现在拥有的是：
import React, { useState, createContext } from 'react';
import endpoints from '../components/endpoints/endpoints';
interface contextTypes {
endpointQuery: string,
setEndpointQuery: React.Dispatch<React.SetStateAction&l
浏览 2提问于2021-07-14得票数 0
回答已采纳
function Counter() {
const [count, setCount] = useState(0);
const prevCountRef = useRef();
useEffect(() => {
prevCountRef.current = count; });
const prevCount = prevCountRef.current;
return <h1>Now: {count}, before: {prevCount}</h1>;
} 在上面的代码片段中，来自React Hoks FAQS的useR
浏览 11提问于2021-01-12得票数 0
回答已采纳
3回答
对于react，我们可以使用setState来改变状态，比如这里的setdummyData，在下面的代码父组件中，使用object header: 2017初始化dummyData，并将对象传递给子组件，并将对象更改为dummyData.header = 2018，但父组件对象正在更改。 我想知道背后的原因。 请参考以下代码片段 import React, { useState } from "react";
import Child from "./Child";
const Parent = () => {
const [dummyData,
浏览 12提问于2020-04-23得票数 0
回答已采纳
我有一个组件，它使用钩子状态(useState) api来跟踪数据。
该对象如下所示
const [data,setData] = React.useState({})
现在我有了多个按钮，可以发出API请求并使用新密钥设置数据
setAPIData = (key,APIdata) => {
const dup = {
...data,
[key]:APIdata
}
setData(dup)
}
现在，如果我同时发出多个请求，它会导致竞争条件，因为在react中设置状态是异步的，并且我会获得先前的值。
在基于类的组件中，我们可以传递一
浏览 6提问于2020-02-12得票数 15
回答已采纳
我有以下使用wavesurfer.js的功能性React组件 import * as React from "react"
import * as WaveSurfer from 'wavesurfer.js'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPlayCircle, faPauseCircle } from '@fortawesome/free-regular-svg-icons'
import { Icon
浏览 84提问于2020-04-07得票数 1
每次执行toggleTest函数时，使用钩子在react中将状态从true切换到false效果很好：
const [testToggler, setTest] = useState(false);
const toggleTest = () => {
setTest(!testToggler);
console.log(testToggler);
}
但是当我把它作为一个对象发送时，它不会切换。怎么回事？
const [testToggler, setTest] = useState({ label: 'test', val: false });
co
浏览 24提问于2019-07-07得票数 0
回答已采纳
目前，我的应用程序正在访问外部数据，在挂载主组件时使用fetch，每当我重新加载页面时，它就会重新加载数据，并重置我链接到的本地存储项。
但是，我想要的是: 1)当用户第一次打开页面时，必须加载整个数据集。2)如果用户删除表中的任何项，然后关闭选项卡或重新加载页面，则这些已删除的项不应重新出现在数据集和表中(除非单击“重新加载”按钮)。
我的主要组件当前如下所示：
function App() {
const DEFAULT_ERROR = null
const DEFAULT_IS_LOADED = false
const DEFAULT_DATASET = []
const
浏览 3提问于2020-06-14得票数 0
我是一个新的反应，我似乎有鸡和蛋的问题。我希望浏览器URL中的查询参数与页面中的useState变量同步。我的问题是，当我让useEffect做一个history.push，然后react更新变量，这会触发另一个history.push，无限递归就会发生。这是我尝试的变通方法，但我必须有重复的代码。一个副本在useEffect内，另一个副本在useEffect外，所以我可以使用它，而不会触发无限递归。 我以为我读到我可以memoize一些东西，但我不确定。我怎样才能避免重复的代码？ import {useState, useEffect} from "react";
impo
浏览 25提问于2021-04-23得票数 0
回答已采纳
我有一个有计数的通知图标按钮，所以我希望每当使用Websocket api获取新数据时，计数都会递增，我如何实现这一点，以及如何使此websocket作为组件接收属性 import React from "react";
import { useState, useEffect } from "react";
const Websocket = (props) => {
const [count, setCount] = useState([]);
useEffect(() => {
let ws = new Websocket(&
浏览 35提问于2021-02-10得票数 0
登录时，重定向比从onAuthStateChanged()更新状态更快。你是如何处理这种行为的？ // firebase/index.js
import React, { createContext } from 'react'
import * as firebase from "firebase/app";
import "firebase/firestore";
import "firebase/auth";
const firebaseConfig = {
apiKey: process.env.REACT_A
浏览 18提问于2020-06-14得票数 0
回答已采纳
假设你有一个水平平面图。
当用户单击项目中的按钮时，您希望呈现一个与您所拥有的平面列表项不同的视图。
假设您实现它，如下所示
{showDetail ? (
<DetailView onPress={toggleShowDetail} />
) : (
<FlatList
data={data}
renderItem={() => (
<View>
<Button onPress={toggleShowDetail} /&
浏览 5提问于2020-07-01得票数 0
3回答
考虑以下代码块：
import React from 'react';
import Card from './components/Card';
import './App.css';
import Buttongrp from './components/Buttongrp';
import { useEffect, useState } from 'react';
function App() {
useEffect(() => {
fetch('https://req
浏览 6提问于2022-04-07得票数 1
我将给你们两个版本的一个组件，我写的。为什么第一个循环给我无限的循环，而第二个循环工作得很好？
我孤立了这个问题，但我想知道为什么逻辑不遵循“罩下”的逻辑。毫无疑问，一些来自useState的黑魔法
//THROWS INFINTE LOOP ERROR
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { Popover, PopoverHeader, PopoverBody } from 'reactstrap';
impo
浏览 6提问于2020-06-12得票数 0
回答已采纳
我的react组件正在通过websocket接收来自服务器的消息。当我尝试使用useState()更新状态时，套接字会被复制。
如果我这么做..。
import React, {useState} from 'react'
export default () => {
let[message, setMessage] = useState()
let ws = new WebSocket("ws://blah");
ws.onmessage = (e) => {
let obj = JSON.parse
浏览 0提问于2019-09-05得票数 2
回答已采纳
未在控制台中更新但在视图中更新的状态值。
这是我的全部代码
import React, { useEffect, useState } from 'react';
const Add = (props) => {
console.log("a = ", props.a)
console.log("b = ", props.b)
const c = props.a+props.b;
return (
<div>
<p><b>{prop
浏览 6提问于2020-08-24得票数 0
回答已采纳
我正在尝试构建挂起的人游戏，并希望从checkMatchLetter函数中的useState中获取值，但不确定这是否可能以及我做错了什么…… import React, { useState, useEffect } from 'react';
import { fetchButton } from '../actions';
import axios from 'axios';
import 'babel-polyfill';
const App = () => {
const [word, setWord
浏览 12提问于2019-09-28得票数 4
回答已采纳
我的错误越来越严重了。太多的重新渲染。
我想做什么？
单击按钮时，调用开始函数并打开模式弹出。一旦开始功能完成，我必须关闭模式弹出。
下面是密码，
enum CheckStatus {
INITIAL,
STARTING,
STARTED,
FINISHED,
FAILED,
}
const useSomeHook = (id) => {
const [status, setStatus] = React.useState(CheckStatus.INITIAL);
const start = React.useCall
浏览 9提问于2021-12-31得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
