如何在使用update循环时获取useEffect中的更新状态
在使用update循环时，可以通过使用useRef钩子来获取useEffect中的更新状态。
useRef是React提供的一个钩子函数，它可以用来在函数组件中存储和访问可变的值。在使用update循环时，我们可以创建一个ref对象，并将其传递给useEffect的依赖数组中。这样，每次useEffect中的状态更新时，ref对象都会被更新为最新的值。
以下是一个示例代码：
import React, { useEffect, useRef } from 'react';
function MyComponent() {
const updateCountRef = useRef(0);
useEffect(() => {
updateCountRef.current += 1;
console.log(`useEffect更新次数：${updateCountRef.current}`);
});
return (
<div>
<h1>使用update循环时获取useEffect中的更新状态</h1>
</div>
);
}在上述代码中，我们创建了一个名为updateCountRef的ref对象，并初始化为0。在每次useEffect中被调用时，我们通过更新ref对象的值来记录更新次数。通过访问updateCountRef.current，我们可以获取到useEffect中的更新状态。
需要注意的是，ref对象的值在组件重新渲染时不会被重置，因此可以用来存储和访问持久化的数据。
推荐的腾讯云相关产品：无
希望以上内容能够帮助到您！如果还有其他问题，请随时提问。
相关·内容
我有一个相当复杂的，它让我很难提供世博会小吃之类的东西，所以我尽我最大的努力解释我面临的问题：
这个应用程序的一个特点是，我有一个虚拟数据数组，用户可以通过这些数据查询，将其添加到他最喜欢的列表中。通过使用Autocomplete文本输入组件，用户可以通过单击列表中的选项向列表中添加一个新的最爱。然后应该显示这个新的收藏项。
收藏夹列表存储在redux存储区中，并使用useEffect钩子每分钟更新一次(出于样式原因)。
我面临的问题是，我需要将最喜欢的列表状态添加到useEffect钩子的依赖项中。但是，在这样做时，我的应用程序没有启动，这似乎是由无限循环造成的(尽管我没有收到任何警告或错误
浏览 4提问于2020-04-03得票数 0
我阅读了有关的文档，并了解了它如何使生活比生命周期方法更容易。然而，我想知道没有，是什么不可能的？
代替(所有代码都是虚拟代码)
useEffect(networkRequest.then(update state));
我就不能用
// inside functional component
function App() {
networkRequest.then(update state)
}
浏览 6提问于2021-01-17得票数 0
1回答
我不明白为什么状态没有随着React中的这个reducer函数的设置而改变。我只想从reducer函数中控制台记录新的状态？ const [lessonState, dispatchLesson] = useReducer(lessonReducer, {
lesson: 0,
isComplete: false,
});
const lessonReducer = (state, action) => {
if (action.type === "UPDATE") {
return { lesson: action.lesson, i
浏览 23提问于2021-11-09得票数 0
回答已采纳
1回答
快速的问题是，当我尝试在我的应用程序中使用useEffect时，我如何修复我收到的警告。这是我的代码：
const userUrl = `${process.env.REACT_APP_API_URL}/${id}`;
const [newUser, setNewUser] = useState({
name: "",
email: "",
status: "",
gender: "",
});
useEffect(() => {
if (id) {
con
浏览 0提问于2021-10-20得票数 1
回答已采纳
2回答
我尝试在useEffect中更新数据，但在控制台中显示警告。
React Hook useEffect has missing dependencies: 'dispatch', 'id', and 'state.selectedHotel'. Either include them or remove the dependency array react-hooks/exhaustive-deps
码
import { GlobalContext } from "../../../context/globalContext";
浏览 10提问于2021-06-24得票数 2
回答已采纳
我正在创建一个项目，我们可以在其中添加和编辑用户。为了编辑用户，我使用react-router-dom Link和useParams挂钩将id作为url参数从一个页面发送到另一个页面。我去拿那个id。这是我用来设置表单数据的id。我将所有用户都存储在redux store中。现在的问题是，当我重新加载页面时，从redux store加载数据需要一些时间，并且useFormHook的setValue抛出错误。 import React, { useEffect, useState } from "react";
import { useForm } from "reac
浏览 45提问于2021-10-27得票数 1
首先，我使用address创建了一个对象数组useState。
在useEffect中，我希望在从API获得响应后更新address。
address的最终价值应该是
[
{ id: "unit", label: "Unit", value: "Unit 1" },
{ id: "floor", label: "Floor", value: "Floor 1" },
{ id: "block", label: "Block", value: &
浏览 3提问于2021-09-15得票数 1
回答已采纳
因此，您可能知道，在正常模式下，我们使用更新依赖关系在状态更新时获得通知，如下所示： const [val, setVal] = useState();
useEffect(() => {}, [val]]); 但在我的例子中，我的状态中有一个数组，我正尝试在useEffect中循环更新它，如下所示： const [val, setVal ] = useState([...]);
useEffect(() => {
anotherArr.forEach(i => {
// get val and modify some indexes
浏览 42提问于2020-11-23得票数 0
回答已采纳
我试图使用连接到组件的道具从useEffect中的状态变量中删除项。我希望从状态变量中获取初始值，然后删除该数组中的元素，并再次将状态变量设置为新值。但是，当我没有在依赖数组中传递状态变量时，它会以React Hook useEffect has a missing dependency: 'abc'. Either include it or remove the dependency array的形式抛出警告，而当我传递它时，它会进入无限循环，我认为这是正确的，因为useeffect工作。这就是我正在尝试的效果：
const [abc, setAbc] = useState
浏览 3提问于2021-07-22得票数 3
回答已采纳
我有一个购物车组件，里面有一个卡片数组。
每次用户从购物车中删除产品时，我都会从本地存储中删除它，并从UI中删除它。
import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import Layout from '../Layout';
import Card from '../Home/Card';
import { getCart } from './cartHelpers';
c
浏览 3提问于2020-09-06得票数 0
回答已采纳
我正在尝试从Firestore数据库中获取一组问题，然后将它们存储在本地数组中，以便稍后在测验中使用。当我在获取数据时，它是异步运行的。我以前处理过这个问题，解决方案是一个useEffect()钩子和有条件呈现组件。 我的代码目前看起来像这样： var questions = [];
var collection = useRef('Planning');
var [loading, setLoading] = useState(true);
useEffect(() => {
if (props.track === 'Testing &a
浏览 110提问于2020-11-20得票数 2
回答已采纳
import { useEffect, useState } from "react";
function CountSecrets() {
const [secret, setSecret] = useState({ value: "", countSecrets: 0 });
useEffect(() => {
if (secret.value === 'secret') {
setSecret(s => ({...s, countSecrets: s.countSecrets + 1}));
浏览 3提问于2021-03-29得票数 0
回答已采纳
我是个反应新手。我了解到，使用效果是在compo第一次初始化时调用的，当props或state.But中有变化时，为什么在这种情况下，当我将某些状态从false更改为true时，不会出现无限循环，但当我在useEffect上执行此操作时，会出现来自compo的无限循环。 我在问，为什么当我在数组中更改状态，而不是布尔值时，它会遇到无限循环？有什么不同？ //runs twise once for the first initalising once when i update the state
function App() {
const [bool,setBool] = useSt
浏览 7提问于2020-04-22得票数 1
回答已采纳
我在useEffect中创建了一个名为func的异步函数。当从防火墙接收数据时，"urlsdata“数据将使用setUrl保存。之后，如果包含在useState中的url中有数据，我将隐藏SplashScreen并将renderbool更改为true。但是，当应用程序第一次呈现时执行useEffect时，由于某种原因，它被执行了两次，所以api总共执行了两次。我认为这是非常不必要的，所以下面的代码只有在renderbool为false时才会执行。
但是，当renderbool为false时，仍然会执行两次。我怎样才能只跑一次呢？
请注意，url和renderbool是强制性的。
这是我
浏览 1提问于2022-08-21得票数 0
1回答
此组件的行为有些奇怪
我试着用几种方法来实现。但我仍然不知道如何正确初始化。
当此状态
const [state, setState] = useState({
qualification: props.profile.qualification,
twitter: props.profile.twitter,
});
结果状态(“AA01”+JSON.stringify(console.log))；AA01{}所有元素不知何故都丢失了。
所以我把它们改成这样
const [state, setState] = useState({
qualific
浏览 1提问于2021-04-03得票数 1
告诉我为什么页面上的重新呈现在用户状态更改再次单击页面之后不能工作，而不是立即。
useEffect(() => {
const sortfdb = Datadb.sort((a,b) => b.count - a.count);
console.log(sortfdb)
setDatadb(sortfdb);
console.log(Datadb)
},[Datadb])
我在页面上有一个字段，我将添加一个数字，它写到useState([])，当更改useState时，它应该对它们进行排序。但这不会发生的。只有当我加一个新的数字时才会发生这
浏览 21提问于2022-06-01得票数 2
回答已采纳
学习通过编码来反应，我有这个错误，这是因为‘调度(clearAnalyserData()；’‘在'setFilteredGraphData’中，在同一个useEffect中我使用了两次'clearAnalyserData‘，但是第二个很好，并且没有出现错误。我做错了什么，在“setFilteredGraphData”中有什么不发送的规则吗？
Warning: Cannot update a component (ConnectedNavBar) while rendering a different component (ConnectedGraphs). To locate
浏览 5提问于2022-08-21得票数 0
3回答
我的组件结构大致如下：
const [data, setData] = useState([]);
useEffect(()=>{
//update data from api
}, [])
return <Switch>
<Route exact path={`${match.path}`}>
{data.map(row=>
<Link to={`${match.url}/${row.id}`}></List>
}
</Route>
浏览 1提问于2020-07-28得票数 0
回答已采纳
我理解，没有依赖项，您就无法访问useEffect中的状态。一个这样的例子：
const [state, setState] = React.useState('')
const ws = new WebSocket(`ws://localhost:5000`)
React.useEffect(() => {
ws.onopen = () => {
console.log(state)
},[])
在本例中，state返回为空，尽管它在代码的其他部分中发生了更改。为了从原则上解决这个问题，我应该将state作为依赖项添加到useEffec
浏览 5提问于2022-01-19得票数 0
在看到Firebase Auth有正确的用户uid后，我试图检索登录的组织的文档。但是，我在useEffect函数中得到了一个无限循环，用于该检索。
import { createContext, useEffect, useReducer} from 'react'
import { projectAuth, projectFirestore } from '../firebase'
export const AuthContext = createContext()
export const authReducer = (state, action) =
浏览 2提问于2022-02-08得票数 0
回答已采纳
我有一个useEffect钩子，在安装组件时加载，如下所示：
useEffect(() => {
listFiles().then(keys => {
setKeys(keys)
console.log(keys)
}).catch(err => {
showFail(err.message)
})
}, [])
我试图使用来测试这个函数，只需使用呈现函数：
beforeEach(() => {
render(<Dashboard />)
})
但是，当我运行任何解决承诺并设置状态的测试时：
je
浏览 4提问于2020-05-04得票数 7
回答已采纳
3回答
当我使用useEffect钩子和setState钩子时，如果我只想让useEffect运行一次，状态就不会更新(即传递一个空数组作为第二个参数)。
如果我将Im更新的数组作为第二个参数传递，状态将被更新，但是useEffect在无限循环中继续运行.
下面是我试图运行的代码:在本例中，当打印出模因或endPage时，它们仍然保存它们的初始状态值([]和0)。
function ImageContainer() {
const [memes, setMemes] = useState([]);
const [currentIndex, setIndex] = useState(0);
浏览 4提问于2020-07-06得票数 0
回答已采纳
我的react应用程序中有下一个组件：
import React, { useEffect, useState } from "react";
import AsyncSelect from "react-select/async";
import { ColourOption, colourOptions } from "./docs/data";
const App = () => {
const [state, setState] = useState([]);
useEffect(() => {
set
浏览 9提问于2021-12-14得票数 0
1回答
我是新的反应，我非常困惑的生命的功能组成部分。假设我有许多类型的输入:复选框，a，b，c和d，它们的值是a，b，c和d。
const OnBoarding = () => {
const [isChecked, setIsChecked] = useState({
a: false,
b: false,
c: false,
d: false
});
const [allCheckedItems, setAllCheckedItems] = useState([]);
//Write function that pushes
浏览 2提问于2020-01-07得票数 2
回答已采纳
因此，每当run() (处于组件的状态)被更改时，我都想调用a。
run()设置另一个状态变量b的值。
import {computeWithB} from '../helpers/compute'
const [a, setA] = useState()
const [b, setB] = useState()
const run = () => {
result = computeWithB(b)
setB(result)
}
useEffect(() => {
run();
}, [a, run]);
浏览 2提问于2020-08-01得票数 0
回答已采纳
我正在显示一个待办事项列表，每个待办事项都有一个编辑按钮，触发一个模式。从模式(子组件)中，您可以更新描述并将新的描述发送到数据库。
在父组件中有update和setUpdate钩子。我是通过两个道具发送，以便我可以更改更新值时，单击保存在模式相反。
当在子组件中使用setUpdate时，我期望父组件重新呈现并再次调用axios，这样，当我单击模态中的保存按钮时，todo列表将显示更新的todo。但不起作用。
如果在子组件中使用setUpdate更改update状态，则父组件为什么不重新呈现。
谢谢你的帮助。
显示待办事项的父组件
import axios from "axios
浏览 5提问于2022-01-13得票数 0
回答已采纳
让我们考虑一下下面的代码：
const CustomersList = () => {
const [loading, setLoading] = useState(true);
const [customers, setCustomers] = useState([]);
useEffect(() => {
// fetch customers from an API and then
// setLoading(false)
// setCustomers(customersArrayFromApi)
浏览 2提问于2022-01-28得票数 0
我正在构建一个在线棋盘游戏，使用create- react -app，react钩子，并使用sockets.io传输数据(玩家位置，活动玩家等)。在连接的用户之间。逻辑的流程是，用户做出选择，该选择被添加到状态中的数组中，然后通过套接字将更新的状态推送到所有连接的用户。问题在于，负责从后端接收套接字数据并更新每个已连接用户的用户数据的useEffect侦听器触发的次数太多，而不是只触发一次。
代码：
将调用发送到后端：
try {
console.log(currentCard, typeof(currentCard.title), tech)
setU
浏览 22提问于2020-03-13得票数 0
回答已采纳
为什么POST在尝试使用useEffect和fetch设置State时停止工作？
在第一个示例中，我可以在Chrome控制台的POST日志中看到，并在烧瓶中打印：
反应：
import React, { useEffect, useState } from "react";
import Button from '@mui/material/Button';
import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
import TextField from '@mui/
浏览 9提问于2022-09-08得票数 -1
回答已采纳
2回答
ProductTable.js
从“react”导入React，{ useEffect，useState }；
function ProductTable() {
useEffect(() => {
fetchData();
}
const fetchData = () => {
axios
.get("http://localhost:4000/api/products/product/viewAllProduct")
.then((res) => {
const getData = res.d
浏览 7提问于2022-11-08得票数 0
2回答
Firestore抓狂了
、、、
我刚刚在另一个域(生产url)下打开了我的项目，当我打开网络请求时，我看到了以下内容：
这需要永远(8分钟或更长时间)。我的CPU热得要死，我哪里做错了？
我的应用程序非常简单，我怀疑其根源在于下面这段代码：
const [items, setItems] = useState([]);
const publish = async () => {
const batch = firestore.batch();
items.forEach(({ id }, index) => {
batch.update(firestore.collect
浏览 0提问于2019-05-21得票数 7
1回答
我有一个应用程序，它每秒钟通过WebSocket接收新数据。每秒钟我收到10到15条我需要存储和显示的消息。我目前正在更新一个状态数组，每次我收到新的数据，但效果是，我重新呈现屏幕10至15次每秒。
我想要实现的是将传入的数据存储在一个数组中，但每秒钟只更新一次屏幕。
我无法工作的方法是创建一个在接收到新数据时更新的非状态数组，并使用计时器每秒钟将该数据复制到状态数组。
这是状态数组的声明：
const [boatData2, _setBoatData2] = useState({});
const boatDataRef = useRef(boatData2);
c
浏览 3提问于2021-05-28得票数 0
回答已采纳
我只是深入研究react。但是useEffect react钩子还是把我搞糊涂了。我知道我可以将依赖项作为数组传递给它，以控制组件的呈现。我已经使用道具和本地状态来做，它是有效的。 让我感到困惑的是，当我将redux reducer作为依赖项传递时，它会导致呈现组件的无限循环。 // users组件 const usersComp = () => {
const users = useSelector(state => state.users);
useEffect(
// fetch users and update users state
useDispa
浏览 150提问于2021-02-28得票数 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
回答已采纳
4回答
获得一个输入，并希望将值传递给处理程序：
const [term, setTerm] = useState('');
<Input type="text" onBlur={(e)=>handleFilter(e, 'params')} />
const handleFilter = async(e, params) => {
//... api call and etc
setTerm(e.target.value); // update term
console.log(term) // return none-up
浏览 10提问于2022-02-25得票数 0
错误:警告:超过最大更新深度。当组件在useEffect中调用useEffect时可能会发生这种情况，但是useEffect要么没有依赖数组，要么在每次呈现时都会更改依赖项之一。
const [products, setProducts] = useState([]);
useEffect(() => {
setProducts(getCartProducts());
}, [products]);
当传递一个空数组作为第二个参数时，应用程序可以正常工作，但是为了反映页面上的更改，我必须刷新它，但是在将'items‘对象作为数组中的第二个参数传递之后，我会收到上面的错误。
浏览 1提问于2020-10-18得票数 1
回答已采纳
我在使用一个setstate调用useEffect时遇到了一些小问题，我把它作为一个子组件的一个支柱。我不知道这是怎么做的。
代码是这样的：
const Parent = () => {
const [state, setState] = useState()
useEffect(() => {
console.log ('state updated');
}, [state])
return (
<>
<Child state={state} setState = {setState}/>
</>
浏览 4提问于2021-12-26得票数 0
我正在尝试重新排列一个状态两次，但是，该状态仅在最后一次useState时生效，我可以使用什么来多次重新排列一个状态？ 代码如下： import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
function App() {
const [array, setArray] = useState([6,2,5,4,1]);
// async update from useEf
浏览 31提问于2021-01-22得票数 2
回答已采纳
当试图使用localStorage来持久化我的反应状态时，我会得到无限重呈现，并且我可以在dev工具中看到状态不断地被填充而不是未填充。
我知道是我对useEffect的使用导致了这种情况，也可能是我用存储状态填充Map对象的条件。
设置状态项没有问题。
找不到它。
任何帮助都非常感谢。
我的代码：
useEffect(() => {
localStorage.myCartState ? setCart(new Map(JSON.parse(localStorage.myCartState)))
:
setCart(new Map())
})
use
浏览 6提问于2021-08-02得票数 0
回答已采纳
我正在尝试制作一个横幅组件，它将使用react的createContext在上下文的状态上呈现。我已经将状态和setState传递给上下文，将允许用户更改上下文状态。我将这个上下文状态存储在localStorage中，这允许在网站关闭后上下文进行预处理。
但我的背景一直在不停地重复。这是我的bannerContext代码..。
import React, { useState, useContext, createContext, useEffect } from "react";
const BannerContext = createContext({});
expor
浏览 1提问于2021-04-16得票数 1
回答已采纳
我目前正在研究useEffect的react文档示例
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
// Similar to componentDidMount and componentDidUpdate:
useEffect(() => {
// Update the document title using the browser API
document.
浏览 5提问于2019-07-12得票数 26
回答已采纳
因此，我知道任何请求和每个异步代码块都必须在.useEffect()方法中编写(对于函数组件)。UseEffect应该在组件挂载时运行我的代码，那么发出用户提供的post数据的post请求的最佳方式是什么？先说谢谢。
浏览 2提问于2021-02-26得票数 0
我的目标是设置一个游戏循环，但是一个简单的测试并不像预期的那样有效。在下面的组件中，我尝试使用useEffect挂钩来增加food。我希望看到“食物: 1”。相反，我看到了“食物: 0”。当我使用dev工具检查组件时，我可以看到食物是2，我发现这个组件安装、增加、卸载、重新安装和再次增加食物。
我有两个问题：
我能为这双坐骑做点什么吗？(比如阻止它，还是等到最终挂载时再使用嵌套组件？)
为什么显示的食物数仍然等于零？是因为game在<span>Food: {game.food}</span>中仍然引用初始实例吗？如果是这样，我如何获得最新的实例？
构成部
浏览 13提问于2022-08-08得票数 1
回答已采纳
1回答
我有以下两个组成部分。
<Foo>
<Bars/>
<Foo>
当调用Foo时，控制台显示：
call Bar useEffect
Warning: Cant perform a React state update on an unmounted component...
call Foo useEffect
call Bar useEffect again
这是代码，但它不会产生相同的警告，这可能是因为它在我的本地的开发模式。但它确实显示了空指纹。
是否不推荐/允许在每个组件中使用useEffect的组件结构？
如果可以的话，我需要更改什么来避免警
浏览 0提问于2021-06-30得票数 0
回答已采纳
编辑:请在下面找到我的完整组件代码。在useEffect上没有刷新“数据”状态...这是怎么回事！
我从useEffect中的firebase获取数据。在useEffect中，我使用useState将数据(数组)存储在状态中。我想在我的rfc render方法中使用这个数据，但首先需要减少()它。我试图在原始useEffect (与我获取数据的位置相同)、其他useEffect中，甚至在我的render方法中减少它。这些都不能真正做到。在reduce函数中，累加器参数保持为空。求求你，我真的需要一些帮助。
import React, { useState, useEffect } from
浏览 45提问于2019-05-21得票数 0
2回答
所以我得到了这个组件：
export default function () {
const [todos, setTodos] = useState([]);
useEffect(() => {
function populateTodos () {
axios.get(`http://localhost:8000/api/all-todos`)
.then(res => setTodos(res.data))
.catch(err => consol
浏览 2提问于2020-03-16得票数 1
回答已采纳
2回答
第二次更新状态可以吗？
、、、
我试图在手推车中显示物品的数量。我希望计数每秒钟更新一次，因此如果用户从cart中添加或删除，它将每秒钟发出请求并刷新、更新状态和数字。我刚刚尝试了这个方法，它运行得很好，但是我想知道是否可以这样做，或者是否有更好的方法。
const [update, setUpdate] = useState(0)
const [data, setData] = useState([])
let currentUser = 1
const getData = () => {
axios.get(`http://localhost:4000/api/userCart/${c
浏览 16提问于2022-06-04得票数 0
我知道使用钩子的传统方法是使用useEffect钩子获取数据。但是为什么我不能在函数组件中调用axios而不是钩子，然后设置数据。
基本上，我是问这样做有甚麽不对：
const [users, setUsers] = useState(null);
axios.get("some api call")
.then(res => setUsers(res.data))
在这里，我不使用useEffect，什么可能出错？
浏览 5提问于2020-05-27得票数 6
查看组件在类组件中呈现的次数的简单方法如下：
render() {
console.log('component')
return <Component />
}
功能组件中的等价物是useEffect吗？
useEffect(() => {
console.log('component');
});
当我调用它时，我注意到'component‘被一遍又一遍地打印出来。这是否意味着我的组件被不必要地一次又一次地重新呈现？
浏览 0提问于2020-06-06得票数 1
我有一个输入。对于输入的每一个更改，我都想调用一个API。
下面是代码的简化版本：
// updated by input
const [urlText, setUrlText] = useState("");
const fetcher = useFetcher();
useEffect(() => {
if (urlText === "" || !fetcher) return;
fetcher.load(`/api/preview?url=${urlText}`);
}, [urlText]);
问题是，当我将
浏览 15提问于2022-06-06得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
