为什么React在useState中使用了错误的值？
React在useState中使用了错误的值是因为React的setState函数是异步执行的。当使用useState创建一个状态变量时，React会将其值保存在一个内部的队列中，并在稍后的某个时间点对队列中的所有状态变量进行批量更新。这种批量更新的机制可以提高性能和渲染效率。
然而，由于批量更新是异步的，所以在同一个函数调用中，多次调用useState来更新状态变量时，后续的更新可能会使用之前的旧值，而不是最新的值。这就导致了在某些情况下，使用错误的值。
为了解决这个问题，React提供了函数式更新的方式。通过传递一个更新函数给useState，React会在更新队列中执行这个函数，并将前一个状态的值作为参数传递给它，从而确保使用的是最新的值。
例如，正确使用useState的方式是：
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(prevCount => prevCount + 1);
}在这个例子中，通过传递一个更新函数给setCount，确保在更新队列中使用的是最新的值。这样就能避免使用错误的值的问题。
对于React的useState使用错误值的问题，腾讯云并没有专门的产品或者服务与之相关。但是，腾讯云提供了一系列的云计算产品和服务，可以帮助开发人员进行前后端开发、服务器运维、音视频处理、人工智能等方面的工作。您可以通过腾讯云的官方网站了解更多相关信息：https://cloud.tencent.com/
相关·内容
3回答
import React, {useState} from 'react';
function App(){
const [counter, setCounter] = useState(0);
const onIncrement = () => {
setCounter(++counter)
};
return(
<div>
<h1>{counter}</h1>
<button onClick={onIncrement}>Incremen
浏览 2提问于2020-12-28得票数 1
回答已采纳
我有一个钩子在我的组件中，当我滚动或向上滚动时，它会检测到。这是代码：
const [scrollDirection, setScrollDirection] = React.useState('')
const [prevOffset, setPrevOffset] = React.useState(0)
const {width} = useWindowSize()
const useScrollDirection = () => {
if (typeof window !== 'undefined') {
浏览 7提问于2022-08-31得票数 -1
回答已采纳
我不太确定为什么会发生这个错误。我一直在尝试解决这个问题，但我不知道该怎么做。我的代码唯一的新之处是我使用了react钩子，并声明了一个名为allUsers的状态变量。
从‘react’导入React，{ useState，useEffect }；从'aws-amplify‘导入{ API，graphqlOperation }
const [allUsers, setAllUsers] = useState([]);
listQuery = async () => {
const allUsers = await API.graphql(graphqlOpera
浏览 0提问于2019-11-25得票数 0
我是个新手，我不清楚input标签中onChange和value之间的关系。如果onChange使用带有空value useState更新了上面声明的任何变量，则会导致错误。为什么会发生这种情况？我认为示例代码清楚地说明了我的问题，所以这里有一个示例。
from React, { useState } import 'react'
function example() {
const [example,setExample] = useState('');
return (
<input type="text"
浏览 0提问于2020-08-24得票数 0
3回答
我从子组件中的父组件调用了一个函数setTodos，但这会返回以下错误：
setTodos不是一个函数
你能解释一下为什么会这样吗，非常感谢。这是我的代码：
import React, { useState } from 'react';
import './App.css';
import Form from './components/Form';
import TodoList from './components/TodoList';
function App() {
const [inputText, set
浏览 3提问于2021-06-18得票数 2
我指的是最后一行for循环中useEffect中的片段。在我运行了一次代码并使用我呈现的按钮console.logged网格状态之后，我将得到一个只有196个数字的数组。
import { useState, useEffect } from "react";
const Gameboard = () => {
const [grids, setGrids] = useState([]);
useEffect(() => {
setGrids([]);
for (let i = 0; i < 196; i++) {
浏览 2提问于2022-11-10得票数 1
回答已采纳
我正在尝试创建一个Material UI范围滑块，上面有两个值。如果我设置： const [value, setValue] = React.useState([5,20]);
const [value, setValue] = React.useState([val]);
const handleChange = (event, newValue) => {
setValue(newValue);
};
return (
<div className={classes.root}>
<Typography id
浏览 44提问于2020-10-03得票数 3
回答已采纳
2回答
当我使用useState时，它会显示在控制台2呈现中，如果我调用setVal，它会抛出错误Too many re-renders. React limits the number of renders to prevent an infinite loop.。为什么？
import React from "react";
export default function Home() {
console.log("render");
const [val, setVal] = React.useState();
// setVal(1);
re
浏览 2提问于2020-09-01得票数 1
回答已采纳
1回答
自定义标记在坐标更改后不重新显示
、、、、
我试图在地图周围移动一些标记，但是在更新包含它们坐标信息的数组之后，什么都不会发生，它只是闪烁而不是移动。
BusMarker.js (客户标记)
import React, { useState, useEffect } from 'react'
import { Marker } from 'react-native-maps'
const BusMarker = props => {
const { longitude, latitude, plate } = props
const [coordinates] = useState({
浏览 2提问于2020-08-22得票数 0
回答已采纳
我正在构建一个应用程序来理解useState钩子。这个应用程序有一个输入用户名的表单。我试图保存输入的用户名。所以，我使用了react。我试图在事件处理程序中等待useState的更新功能。
const usernameChangeHandler = async (event) => {
await setEnteredUsername(event.target.value);
console.log(enteredUsername, enteredAge);
};
当我尝试记录用户名时，它并不显示当前状态，而是显示前一个状态。为什么？
浏览 7提问于2022-08-17得票数 0
回答已采纳
我试图使用useState编写代码，在单击按钮时在开和关之间切换。
const [isON, setIsON] = React.useState(true)
<button onClick={() => setIsON(!isON)}>{ isON ? console.log('ON') : console.log('off') } />
我使用了这个代码，但是当我使用它时，我会得到语法错误。
浏览 13提问于2022-10-25得票数 0
回答已采纳
1回答
我在试着
const [data, setData] = React.useState('');
const [pointdata, setPointData] = React.useState('');
在我的API目录中。但是，每次我尝试运行代码时，我都会得到Cannot read properties of null (reading 'useState'
但是，当代码在/page/myfile.js中时，相同的代码可以正常工作。
我如何将useState和useEffect放在API目录中，或者是它们的另一种方法？
为什么它是一个API文
浏览 16提问于2022-05-28得票数 2
我为局部变量使用了react钩子，比如const using，setSomthing = useState('')和redux来存储通过整个组件使用存储和提供程序传递的变量。 但是我被告知不应该同时使用React Hooks和Redux。有人能解释为什么我不应该，如果我不应该，我应该如何在函数组件中存储局部变量？
浏览 8提问于2019-12-18得票数 3
回答已采纳
我正在尝试使用useParams钩子从路由中获取一个值，并在我的页面的异步处理程序函数中使用它，该函数还使用了useEffect和useState。
我注意到我的页面工作正常，直到引用了从useParams获得的值(UseParams)。一旦在placeId中引用了fetchPlaces，就会得到以下错误：
React Hook useEffect has a missing dependency: 'fetchPlace'
我不明白发生了什么--为什么我一引用useParams钩子设置的值，它就会失败
import React, { useEffect, useState }
浏览 7提问于2022-02-16得票数 1
我为设置状态定义了如下上下文，并且如下所示：
interface DialogsCtxState {
isDialogOpen: boolean;
setIsDialogOpen: React.Dispatch<React.SetStateAction<boolean>>;
itemVisible: boolean;
setItemVisible: React.Dispatch<React.SetStateAction<boolean>>;
}
const initialState: DialogsCtxStat
浏览 1提问于2020-07-17得票数 0
为什么在第一次单击之后可以在setinterval中获得正确的计数值，然后转换就不会再次发生了？
import React, { useEffect, useState } from 'react';
const Demo1 = () => {
let [count, setCount] = useState(1);
const onCountClick = () => {
count += 1;
setCount(count);
};
useEffect(() => {
setInterval(() => {
浏览 1提问于2021-05-08得票数 0
对不起，我从react开始，我有一个401错误(未经授权)，我创建了一个带有React表单的表单，当我点击“发送”时，我的请求返回我401 (未经授权)，但是如果我第二次按一下，一切都按预期进行。
我不明白为什么它在我第一次点击的时候不起作用，但是第二次它起作用了
耽误您时间，实在对不起
import { useState } from 'react'
import axios from 'axios'
import env from 'react-dotenv'
import { useForm } from 'react-hook-f
浏览 1提问于2022-10-30得票数 0
import React, { useState } from "react";
function HookCounter() {
const [count, setCount] = useState(0);
return (
<div>
<button onClick={() => setCount(count + 1)}>Count {count}</button>
</div>
);
}
export default HookCounter;
每次需要重新渲染时，React
浏览 1提问于2019-11-08得票数 9
我创建了一个功能组件
import React from 'react';
import { View, ScrollView, Text, SafeAreaView } from 'react-native';
import { useState, useEffect } from 'react';
const listFiliere = ({item}) => {
const [show, setShow] = useState(false);
return(
<View style={{ he
浏览 5提问于2022-01-15得票数 0
在功能性子组件中使用useState很好，但由于某些原因，在'main‘组件中使用时不能工作，这里称为'App’。
React在控制台中显示了“无效钩子调用”，但是我检查了100次代码，它与子组件中的代码完全相同。
对于“主”组件和子组件之间的区别，我应该知道些什么吗？为什么这个不行？
这是将“主”组件(App)呈现给DOM (Main.jsx)的部分：
const app = App();
const appCont = crEl('div');
document.body.appendChild(appCont);
const reactRoot = cre
浏览 2提问于2022-06-21得票数 1
回答已采纳
我在reacjs和typescript中遇到了钩子useState的问题，我的问题是当我尝试在useState中加载数据并检索该数据时，丢失了该数据，例如下面的示例。 import React from 'react'
import {Row, Col} from 'react-styled-flexboxgrid'
import {Table, Th, Td, Done, Err} from './styles'
import {CampaingHeader, CampaingBody} from '../../../../../us
浏览 154提问于2020-10-29得票数 0
回答已采纳
我正在尝试使用React和Typescript中的useContext挂钩。我收到一个错误，显示为Cannot find namespace 'GameContext'.
我在常规的.js中使用了相同的语法，但在Typescript中似乎不起作用。
import { createContext, useState } from 'react';
export const GameContext = createContext();
export const GameProvider = (props) => {
const [game, setGa
浏览 1提问于2021-02-20得票数 1
3回答
在运行run函数时，我预计值变量的值为“new”，但即使是500 ms，它仍然是“旧的”。为什么会发生这种情况，以及如何解决这个问题？
import React, { Component, useState } from "react";
import { render } from "react-dom";
function App() {
const [value, setValue] = useState('old');
const run = async() => {
setValue('new'
浏览 3提问于2019-12-20得票数 4
2回答
我知道，在React中处理交互的方法应该是合成事件，而不是本地dom事件，但我想知道为什么这种行为如此怪异。当React事件正常工作时，dom事件总是将状态重置为初始状态。
import React, { useState, useEffect } from "react";
import "./style.css";
export default function App() {
const [num, setNum] = useState(0);
function clickMe() {
setNum(num + 1);
}
use
浏览 0提问于2021-02-18得票数 2
回答已采纳
我是React的初学者。我正在尝试构建一个组件来恢复输入的文本，然后将其插入到HTML中。 import React, { useState } from 'react';
function InputGetter(){
const [text, setText] = useState("")
let typed = ""
return(
<div>
<input type='text' onChange = {(e)=> typed =
浏览 14提问于2021-02-05得票数 0
回答已采纳
我有一个需要像这样传递状态的组件，这样组件就可以更改其父组件中的状态。我只是在使用React Testing Library，没有使用酶，但使用了Jest。
const [open, setOpen] = useState<boolean>(false);
<Toggle value={open} setValue={setOpen} onText='Open' offtext='Closed' />
和组件本身
import React, { Dispatch, SetStateAction } from 'react'
浏览 10提问于2021-02-13得票数 0
我有一个，这里我使用mobx ("mobx- React "："^6.1.8")并使用。
我得到了错误:无效的钩子调用。只能在函数组件的主体内调用钩子。
商店index.js
import { useContext } from "react";
import UserStore from "./UserStore";
import SettingsStore from "./SettingsStore";
const useStore = () => {
return {
UserStore
浏览 5提问于2020-03-10得票数 1
2回答
我发现很难清除我设置为setImportFile useState的这个文件输入。这是我声明的useState
const [importFile, setImportFile] = React.useState<File | null>();
const [fileError, setFileError] = React.useState<string>("");
在这个const方法中，我清除了两个useState变量，但只有一个被清除，即setFileError。
const clearModal = () => {
se
浏览 4提问于2022-03-04得票数 1
我是React的新手，我正在使用React和Material-UI构建一个个人投资组合，作为我的第一个项目，使用我在过去几周中学到的知识。
当我尝试构建一个简单的切换器，在点击按钮时从右侧弹出一个侧面导航，我在React中得到了一个" error : too code renders“错误，并在Navbar.js中使用了以下相关代码：
// states
const [state, setState] = useState({
right: false
})
const toggleSlider = (open) => {
setState({right: ope
浏览 0提问于2020-07-28得票数 0
2回答
我在这里读过很多同样的问题，我应用了对每个人都有用的东西，但它似乎对我不起作用。我尝试从API中获取数据，但即使使用UseEffect钩子，setList也不希望设置ListVille。这是我的密码，你知道为什么吗？
import React, {useEffect, useState} from 'react';
import {Navigate} from 'react-router-dom'
import Entete from './MEP/entete'
function Localisation() {
const [CP, s
浏览 3提问于2022-07-01得票数 1
回答已采纳
我想更新子组件中的状态，但是它不起作用。实际上，有很多东西。我想用map列出每一项。
错误：
React "useState“不能在回调中调用。必须在React函数组件或自定义React函数中调用。
守则：
const renderItems = useCallback(() => {
return items.map((item, idx) => {
const { name } = room
const [isCopiedURL, setIsCopiedURL] = useState(false)
return (
<
浏览 6提问于2020-05-28得票数 6
回答已采纳
所以我有以下组件
const ChartContainer: React.FC = () => {
const [data, setData] = React.useState<unknown>([])
const [prevMonthStamp, setPrevMonthStamp] = React.useState<number>()
React.useEffect(() => {
var d: any = new Date();
d.setMonth(d.getMonth() - 30);//timestamp of x
浏览 4提问于2021-07-01得票数 1
回答已采纳
当我这样做的时候，它就起作用了
import React, { useState, useEffect } from 'react'
// Node Binance API
// https://github.com/binance-exchange/node-binance-api
const Binance = require('node-binance-api')
const binance = new Binance().options({
APIKEY: 'xxxxxxxxxx',
APISECRET: 'xxxxx
浏览 2提问于2020-06-28得票数 0
为什么在反应中会出现上述错误？-如果我取出useState for 'count2‘in Person.js，它工作得很好--但这肯定会奏效吗？
我有两个文件: Persons.js，它呈现一个Person.js列表。“‘people”数组被传入
import React, { useEffect, useRef, useContext, useState } from 'react';
import Person from './Person/Person';
const Persons = (props) => {
const [c
浏览 1提问于2020-10-27得票数 1
回答已采纳
今天早上我在一个购物网站上工作，使用了React类型记录和上下文API .对于这些产品，我使用了一个来自web的开放API来检索一些数据(用于测试)，并且我使用这些数据作为我的[products, setProducts]的初始状态.当我在上下文文件中console.log(products)我的产品状态时，我确实得到了数据，但是当我在应用程序中使用了提供程序之后，我得到了一个console.log空数组.我不知道为什么会这样..。谢谢你的帮忙
上下文API文件
import * as React from 'react';
import { useQuery } from &
浏览 5提问于2021-06-08得票数 0
回答已采纳
我正在尝试将事件处理程序传递给父组件，因此我编写了以下代码： import React, { useState } from "react";
export default function App() {
const [val, setVal] = useState("");
function handleChange(event) {
console.log(event.target);
setVal(event.target.value);
}
return (
<div className=
浏览 11提问于2020-10-25得票数 1
回答已采纳
3回答
根据承诺调用React钩子
、、、、
我有一个存储在AsyncStorage中的ID，根据这个调用，我想发出一个服务器请求。 所以我们需要这样的东西： AsyncStorage.getID().then(id => {
useLoadFromServer(id)
} 但我总是纠结于如何错误地使用钩子。到目前为止，我尝试了： // First Approach
const MyScreen = () => {
const [ID, setID] = useState()
AsyncStorage.getID()
.then(id => setID(id))
.catch(e =&g
浏览 52提问于2021-10-08得票数 1
回答已采纳
我试图把道具送给一个孩子，其中一个道具就是useState本身。如果我将类型声明为Function，我会得到一个关于需要更具体的错误，如果我使用了void，我就得到了Expected 0 arguments, but got 1.
如何声明setState钩子的类型？
app.tsx
import React, { useState } form 'react'
import Component from './component'
const App = () => {
const [foo, setFoo] = useState>str
浏览 1提问于2021-03-03得票数 0
回答已采纳
我在应用程序中使用了reactjs。currid_s最初设置为值-1。稍后，在单击按钮后，它被设置为2，但计时器不会在控制台中显示更新后的值。为什么？以下是代码
import React, { useState, useEffect } from "react";
export default function App() {
const [currid_s, setcurrid_s] = React.useState(-1);
const handless = () => {
console.log("yess");
setcu
浏览 17提问于2021-05-23得票数 2
回答已采纳
我已经编写了一个简单的React应用程序来跟踪反馈，该应用程序的完整代码如下：
import React, { useState } from 'react'
import ReactDOM from 'react-dom'
const App = () => {
// save clicks of each button to its own state
const [good, setGood] = useState(0)
const [neutral, setNeutral] = useState(0)
const [bad, se
浏览 0提问于2020-12-04得票数 0
我想了解关于useEffect和eslint的3种“为什么”，以及关于useEffect如何定义何时触发的总体“如何”。
问题以注释形式出现在代码示例中。
。
import React, { useEffect, useState, useCallback } from "react";
import ReactDOM from "react-dom";
function App() {
// Case A
// why eslint want a as dependensy if it works fine?
const [a, setA] =
浏览 0提问于2020-10-11得票数 0
回答已采纳
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
回答已采纳
为什么在带有useRef的计数器和每个组件的回调函数集中，每个呈现组件的计数和存储都附加了2而不是1？
import React, { useRef, useState } from 'react';
const store = new Set();
let count = 0;
export function Forms() {
const [value, setValue] = useState(0);
const countRef = useRef(++count);
const submit = (e) => {
e.preventDe
浏览 5提问于2021-06-12得票数 0
回答已采纳
1回答
我正在尝试使用react native.After创建项目并安装我想要使用的在导航器中使用的所有依赖项，例如：
const MainNavigator = createStackNavigator({
Dashboard: DashboardScreen,
ListSurveyor: {
screen: topSurvayorsNavigator,
navigationOptions: ({ navigation }) => {
const dispatch = useDispatch();
浏览 4提问于2020-01-12得票数 0
我的问题与使react挂钩成为可能的Javascript机制有关。 React的最新发展让我们可以创建钩子，即。对于React状态，在如下这样的简单函数中： function App () {
const [someVar, setSomeVar] = useState('someVarDefaultValue');
return (
<div
onClick={() => setSomeVar('newValue')}>{someVar}
</div>
);
} 钩子useState返回
浏览 19提问于2018-12-22得票数 14
回答已采纳
我在useEffect函数中的useState状态不是最新的。在我通过useEffect中的setState修改了我的旧状态后，它会记录我的旧状态。我知道我可以使用useRef并将其传递给useState，但它在setTimeout等内部不起作用。示例如下(查看hook.js文件和console.logs)：https://codesandbox.io/s/prod-wildflower-qbwxt import React, { useEffect, useState } from "react";
import "./styles.css";
import
浏览 24提问于2020-04-03得票数 0
返回一个错误：./src/index.js尝试导入错误：'./App‘不包含默认导出(导入为'App')。
import React, { Component, useState } from "react";
const App = () => {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
return (
<div>
浏览 3提问于2019-11-05得票数 4
我有以下简单的组件，我只是想在开始时设置一个值。
因此，尝试在useEffect中设置值。
我在这里将组件简化为最小。
只要我试图通过useState设置值，它就会引发以下错误。
错误:太多的重呈现。React限制呈现的数量，以防止无限循环。
它不是externalFunction。问题在于使用useState setter本身，因为即使将其设置为true也会引发相同的错误。
为什么这是个问题？
如果我试图在这里做一个计数器，我只输入useEffect一次当我注释掉setValid。
但是，如果我打电话给setValid，在出错之前，我会输入useEffect大约25次。
我怎样才能纠
浏览 3提问于2022-02-25得票数 2
1回答
我在React Native中得到以下代码的错误： Invalid attempt to destructure non-iterable instance. In order to be iterable, non-array object must have a [symbol.iterator]() method counter-context.js import React, {useState, createContext} from 'react'
export const CounterContext = createContext();
export co
浏览 68提问于2020-09-12得票数 2
回答已采纳
在我的项目中，我去掉了类，只使用了Hooks。现在我正在尝试创建一个HOC，我的linter返回了一个错误，因为在我的curry函数中使用了Hooks。这是我的代码的简化版本：
const myCurryFunction = WrappedComponent => props => {
const [state, setState] = React.useState();
return <WrappedComponent {...props} />
}
完整的eslint错误是这样的：
React Hook "useState" cannot b
浏览 6提问于2020-03-06得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
