为什么在将setState作为依赖项的情况下useEffect不重新运行？
在将setState作为依赖项的情况下，useEffect不会重新运行的原因是基于React的更新机制。
React中的useState和useEffect是两个常用的Hook函数，useState用于定义状态变量，而useEffect用于处理副作用。
在函数组件中，useState用于定义状态变量，而通过调用setState来更新状态。当调用setState时，React会重新渲染组件，并触发组件的更新流程。在更新流程中，React会比较前后状态的差异，并根据差异进行最小化的DOM操作，以提高性能。
而useEffect用于处理副作用，比如订阅数据、发送网络请求、操作DOM等。它接收两个参数，第一个参数是一个回调函数，第二个参数是一个依赖数组。当依赖数组中的任一项发生变化时，useEffect会重新运行。
但是，如果将setState作为useEffect的依赖项，每次调用setState都会导致依赖数组中的状态发生变化，从而触发useEffect重新运行。这样会导致无限循环的副作用，性能低下且可能导致应用崩溃。
为了避免这种情况，React提供了一个解决方案，即传入一个函数作为setState的参数。这个函数接收前一个状态作为参数，并返回新的状态值。通过这种方式，可以确保状态的更新是基于前一个状态的，而不是依赖于useEffect的重新运行。
因此，在将setState作为依赖项的情况下，useEffect不会重新运行，以避免无限循环的副作用。如果需要在状态更新后执行某些操作，可以在setState的回调函数中处理，或者将状态更新的逻辑放在useEffect中的依赖数组中。
腾讯云相关产品和产品介绍链接地址：
相关·内容
所以，我偶然发现了这个奇怪的情况：
我有一个全局响应上下文提供程序，提供了一个全局状态，如下所示
const Context = createContext();
const ContextProvider = ({children}) => {
const [state, setState] = useState('');
return <Context.Provider value={{state, setState}}>{children}</Context.Provider>
}
const useMyState = () =&
浏览 2提问于2022-04-20得票数 3
回答已采纳
我有一些useEffect函数，它在组件第一次出现时工作： useEffect(() => {
(async function () {
try {
console.log('works');
const token = await AsyncStorage.getItem('token');
if (token)
setState({...state, isAuthorized: true})
} catch (error) {
cons
浏览 12提问于2020-08-26得票数 0
回答已采纳
2回答
有人能解释一下为什么这会触发useEffect吗？setState钩子中的useState函数似乎总是一个函数。它在任何时候都不是undefined (初始化时)吗？
const [state, setState] = useState(0)
useEffect(() => {console.log('triggers')}, [setState])
我离开了反应18s安装/卸载的警告，但是既然setState从来不改变效果，就不应该开火吗？我在这里错过了什么？
以上代码与编写以下代码基本相同：
useEffect(() => {...}, [])
浏览 7提问于2022-10-05得票数 1
回答已采纳
React的useEffect钩子通常需要将每个外部值添加到依赖项数组中。似乎有一些例外，比如useState的第二个数组项中给出的setState函数，或者useReducer中的dispatch。 据我所知，这是因为React保证setState永远不会改变，所以ESLint觉得没有必要在依赖项中要求它。但是ESLint是怎么知道的呢？有没有一种方法可以让我指定一个永远不变的东西，让ESLint拾取它，并允许我省略“伪依赖”？ 举个例子： function useCustomHook() {
const [state, setState] = useState(false);
r
浏览 75提问于2021-05-05得票数 1
回答已采纳
我有一个简单的日期选择器组件，为预置日期范围按钮。
问题在我的useEffect中:我正在使用它在呈现时与初始状态进行通信，但当然会发出警告("useEffect缺少依赖项“)。
这样做有好的模式吗？
儿童：
const LAST_7 = "LAST_7";
let to, from, filter;
// figure out values for "from", "to", and "filter" (which is set to LAST_7 in case "from" and
浏览 2提问于2020-04-23得票数 6
1回答
在根文件夹中，我有一个带有一些React钩子和上下文的index.js文件。其中一些内容看起来像这样： import React, {
createContext,
useContext,
useState,
useEffect,
} from 'react';
//other stuff
export const createStoreProvider = store => ({
children,
}) => {
const [state, setState] = useState(store.getState());
useEff
浏览 13提问于2019-09-13得票数 0
回答已采纳
1回答
目前，我只是简单地在useEffect钩子中调用它，而不是将它作为依赖项，因为我只想让它运行一次。然而，这给了React Hook useEffect has a missing dependency: 'dispatch'.我是否应该将调度添加到依赖项中，或者是否有更好的做法？ useEffect(() => {
dispatch(handleGetUser());
}, []);
浏览 11提问于2020-04-27得票数 0
回答已采纳
为什么当我在我的setState中useEffect时，组件没有再次执行呈现？我在google上读到，如果我在setState中使用useEffect，该组件将重新呈现。
我的代码：
export default function CarouselMusicGenres() {
const [musicGenres, setMusicGenres] = useState(null)
const setAllMusicGenres = () => {
MusicGenresAPI.getAll()
.then((response)
浏览 2提问于2021-11-27得票数 0
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
回答已采纳
1回答
我的应用程序中有些部分必须同步工作。我用的是作架。问题是祖站的setState函数是异步工作的。请告诉我是否还有其他库支持同步状态更改或任何技巧。
App.js (react示例)
// in real
import create from 'zustand'
import logo from './logo.svg';
import React, { useEffect } from 'react';
const useStore = create(() => ({
counter: 0
}))
function App() {
浏览 5提问于2022-05-18得票数 0
我正在构建一个示例dApp项目。我从智能合约中获取一些值，并调用API返回数据，这些数据运行良好。但是当我在getMyNFTs函数中设置状态时，它开始被无限期地调用。 所以我把我的setState放在我的useEffect中，因为我知道当我在那个函数中调用not时会发生这种情况，我想停止多次调用它，但现在它根本没有被调用。我是不是用错了useEffect钩子？ let [myNFTs, setMyNFTs] = useState([]);
let wallet = [];
useEffect(() => {
getMyWallet();
return () =>
浏览 14提问于2021-11-03得票数 0
回答已采纳
2回答
我声明并初始化了变量，如下所示：
const [user, setUser] = useState(null)
然后做一个像这样的函数：
const getUser2 = async () => {
try {
const user2 = await AsyncStorage.getItem('user')
let parsed = JSON.parse(user2)
setUser(parsed)
console.warn('1')
} catch(err) {}
}
那就这样说吧：
use
浏览 6提问于2022-10-06得票数 0
回答已采纳
我听说，在function组件中声明函数以处理单击应在useCallback钩子中完成，以避免在每次呈现时重新创建该函数，特别是如果函数有点复杂，如下所示：
const handleClick = useCallback(()=>
{
"...do a lot of calculations here that takes time"
},[]);
<button onClick={handleClick}>
Click me!
</button>
但是我有一个特殊情况，当单击按钮设置状态时，我希望useCallback函数触发，
浏览 15提问于2022-07-25得票数 1
回答已采纳
学习钩子，试图使用useEffect读取JSON文件，目的是setState为数组并呈现到列表，但该程序似乎不是第一次运行useEffect。 useEffect(() => {
getData()
})
const [people, setPeople] = useState([])
const getData = () => {
Json.forEach(person => add(person))
}
const add = (person) => {
const peopleCopy = people
const newPerson =
浏览 62提问于2020-12-29得票数 1
回答已采纳
我有点新的反应，所以我想要的是，我有一个按钮来切换一个人的组成部分，我有一个驾驶舱的组成部分。但是每当我切换人员组件时，我都不想总是重新渲染驾驶舱组件。
这是我的Cockpit.js组件文件。
import React, { useEffect } from 'react';
import classes from './Cockpit.css';
const cockpit = props => {
useEffect(() => {
console.log('[Cockpit.js] useEffect');
浏览 1提问于2020-06-26得票数 1
回答已采纳
3回答
我有一个，我正在使用Socket.io。每次套接字无法连接服务器(每4秒进行一次自我测试)，它就调用函数ioConnectError。
预期行为:如果state不是lost调用setState('lost')，则为。如果当前的state已经是lost -什么也不做。
当前行为:处于函数ioConnectError状态的一直处于ok状态(它是默认值)，即使它已被设置为lost。它会导致组件的双重重呈现。
const ConnectionStatus=(props)=> {
let [state, setState] = useState('ok');
浏览 5提问于2019-11-05得票数 1
我是新的反应和混淆的结果，下面的代码是给。
num得到了值-1，我认为应该是100。
useEffect[num]将首先运行，因为num被初始化为-1，因此调用num。
然后useEffect[dummy]将运行，调用setNum(-1)。
我了解到，对同一个setState函数的多个调用是批处理的，并且只呈现最后一个调用的结果。
因此，setNum(100)似乎将被后续的setNum(-1)覆盖。
问题是，如果setNum(-1)最终被处理了，它应该在useEffect[num]中调用setNum(100)。
num应该是100，但它被困在-1。
为什么我的程序在最后调用setNum(1
浏览 3提问于2021-08-15得票数 1
回答已采纳
我试图理解在react中基于类的组件。我偶然发现了这些生命周期方法。我只是想了解一下componentDidUpdate()
据我所知，只有在this.setState被调用时，react组件才会重新呈现。因此，理想情况下，只有在触发某些componentDidUpdate时才会调用setState？
此外，请纠正我的理解，如下所述：
componentDidUpdate()不同于useEffect()，因为如果更改了依赖数组的任何元素，useEffect就会自动重新呈现，但是componentDidUpdate可能永远不会单独触发呈现(除非我们在其中调用this.setState() )。
浏览 22提问于2021-09-28得票数 1
回答已采纳
我创建了一个自定义钩子，该钩子根据不同类型的数据维护状态，如下所示：
import { useState, useRef, Dispatch } from 'react';
function useBackedState<TData, TBacking>(initialData: TBacking, converter: (backing: TBacking) => TData):
[
state: TData,
getBackingData: () => TBacking,
setData: Dispatch<TBacking>
浏览 7提问于2022-08-20得票数 0
回答已采纳
1回答
我有一个自定义钩子，它接收可观测值数组作为参数，然后(在useEffect钩子中)在可观测值发出值时设置内部状态。
export const myHook = (obs$: Observable<any>) => {
const [state, setState] = useState();
useEffect(() => {
obs$.subscribe((x) => setState(x));
}, [obs$]);
return state;
}
这会导致无限循环，我猜是因为obs$对象上的某些属性在解析过程中发生了
浏览 3提问于2022-04-21得票数 1
const handleLike = async () => {
await likeTweet(tweet._id, user._id);
};
useEffect(() => {
const fetch = async () => {
const response = await fetchLikes(tweet._id);
setTweetLikes(response.data);
console.log("useEffect");
};
fetch();
}, [han
浏览 4提问于2022-09-06得票数 0
回答已采纳
我已经详细介绍了这些文档，并且了解到，如果需要以前的状态，可以传递一个setState函数。
在这里，我试图根据变量的状态设置另一个变量的状态。这在我看来是合乎逻辑的，但感觉很奇怪。找个精神正常的人检查一下。
export default function Comp(props) {
const [command, setCommand] = useState("");
const [items, setItems] = useState(allowedTags);
useEffect(() => {
setCommand((prevComm
浏览 0提问于2021-10-18得票数 0
回答已采纳
3回答
export default function CreatePage() {
let [state,setState]=useState({})
let flag=true
useEffect(()=>{
if(flag){
axios.get('http://192.168.43.151:3001/data').then((res)=>
{
console.log(res.data)
setState({...res.data})
flag=false
console.
浏览 7提问于2022-01-17得票数 0
回答已采纳
2回答
我对此反应很新，所以我仍然对组件的生命周期感到困惑。但这个问题让我抓狂了。
例如，我不明白为什么添加"setState(10);“会导致"Test”组件的样式恢复到它的默认值，而<div ref={ref2}>Hi</div>则保持它的样式。(见下图)
我知道"setState(10);“会导致重呈现，但是为什么要还原"Test”组件的样式呢？
另外，请忽略调用setState(10)的“实际用途”--我知道它是没有意义的，因为它从未被使用过，而且我知道使用"state“作为UseEffect依赖项可以解决这个问题。但是我的主要问
浏览 4提问于2022-02-27得票数 1
回答已采纳
直到今天，我还以为没有依赖数组的useEffect内部的代码和useEffect之外的代码都会在每个重发程序上触发，但是后来我发现了这个奇怪的情况，我不明白为什么会发生这种情况。
在示例中，当您第一次单击该按钮时，它会将一个setState触发为不同的值，以使其重命名并调用两个console.log，但当您第二次单击该按钮时，会以相同的值调用setState，仍然会调用外部console.log，但useEffect内部的console.log不会.为什么？，这不是一个完整的改进机吗？如何在不再次触发useEffect的情况下重新评估组件？
下一次单击按钮时，不会发生任何事情，因为调用具有相同
浏览 15提问于2021-04-28得票数 3
回答已采纳
我有一段代码，当任何依赖项发生变化时，我想运行它。其中一个依赖项未在效果中使用
const { contractParams, serviceInstance } = entityStore;
useEffect(() => {
const [first, second, third, fourth] = getParamDetails(contractParams);
setFirst(first);
setSecond(second);
setThird(third);
setFourth(fou
浏览 60提问于2021-09-23得票数 2
我有两个useEffect挂钩，它们都将在startTime/endTime状态的变化中运行。
useEffect(() => {
if (selectedProduct) {
fetch(...)
.then(res => res.json())
.then(res => setMyState(res.data));
}
}, [selectedProduct, startTime, endTime]);
useEffect(() => {
if(selectedStep){
c
浏览 2提问于2021-05-19得票数 0
回答已采纳
实际上，我正在使用useState和useEffect hooks在空状态下针对一些DOM元素。
没问题，我想我做得对。这是我的实际代码：
const [state, setState] = useState({
title: [],
subtitle: []
});
useEffect(() => {
const myNewTitle = ["Hello", "World"];
const myNewSubtitle = ["What's", "up?"];
setSta
浏览 3提问于2020-03-03得票数 4
回答已采纳
2回答
意外早退报表
、、
我已经尝试使用Material制作一个响应型导航条，但是当窗口小于900 in时，这段代码会崩溃，从而导致错误错误:呈现的钩子比预期的少。这可能是由于意外的早期返回语句引起的。错误在useEffect钩子中。但我不明白为什么这会让我出错。我猜是因为违反了钩子规则。但是我已经试过了所有的东西，但是我仍然无法修复它。
import React,{useEffect,useState} from 'react'
import {AppBar ,Toolbar, Container ,makeStyles,Button, IconButton ,Drawer} from '@m
浏览 9提问于2021-02-07得票数 1
回答已采纳
在我这里的例子中，我希望在替换url <Checkout/>以加载component <ContactData/>时避免重新呈现组件<ContactData/>。
正如可以在useEffect上看到的那样，当<Checkout/>加载时，它会在url上得到一个query尾巴，类似于：http://localhost:3000/checkout?cheese=0&salad=0&special=0&veggie=1。然后我重定向到url，如下所示：http://localhost:3000/checkout/contact-
浏览 0提问于2020-05-04得票数 0
我注意到react的详尽-deps行规则并不总是对setState函数或当您提取customHooks时发挥很好的作用。
例如，如果我有一个customHook，如：
function useValidation(initialThings) {
const [needsValidation, setNeedsValidation] = useState(false);
const [thingsToValidate, setThingsToValidate] = useState<Things[]>(initialThings);
useEffect(() =>
浏览 2提问于2022-03-08得票数 0
回答已采纳
3回答
import React, { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
function App() {
const [minus, setMinus] = useState(3);
const ref = useRef(null);
const handleClick = () => {
setMinus(minus - 1);
};
cons
浏览 8提问于2022-02-17得票数 0
我正在从useEffect钩子中调用api
function ChangePassword(props) {
const token = props.match.params.token;
const [state, setState] = useState({
password: "",
confirmPassword: "",
});
const [status, setStatus] = useState({
loaded: false,
auth: fals
浏览 0提问于2021-06-26得票数 7
回答已采纳
我是React的初学者，我正在从udemy课程中学习。最初，我认为在状态更新之后，函数组件中的所有代码都会重新呈现/重新运行。但后来我在重定向之前看到了倒计时的实现，并感到困惑。
import React, { useState, useEffect } from "react";
import { useHistory } from "react-router-dom";
const LoadingToRedirect = () => {
const [count, setCount] = useState(5);
let history =
浏览 0提问于2021-10-10得票数 0
我想知道为什么'Hello‘只记录一次，因为有setCounter(1)会触发重呈现，对于我来说'Hello’将被记录两次。也许这与依赖数组有关？由于props.visible未被传递，useEffect()将只运行一次？
这是我的CodeSandBox：
任何帮助都是非常感谢的。
import { useState, useEffect } from "react";
export default function App(props) {
const [counter, setCounter] = useState(0);
浏览 7提问于2021-10-27得票数 0
回答已采纳
我不知道为什么当我调用useEffect依赖项时，useState不能重新运行，我试图将状态作为useEffect依赖项传递，但它造成了无限循环。我想在调用setState时运行useEffect。 有没有办法做到这一点？ useEffect(() => {
console.log('useEffect initial state ')
fetch(API)
.then(res => res.json())
.then(response => {
setState(response.
浏览 45提问于2021-05-01得票数 0
回答已采纳
function SomeComponent(props)
{
const [state, setState] = useState();
}
对于这样的组件，react能确保setState和props始终是同一个对象实例吗？
在我测试的时候，我相信是这样的。在许多官方示例中，setState和props没有添加到useEffect的依赖列表中。
但是我没有找到任何关于这方面的文件。还有其他类似它们的物体吗？
浏览 0提问于2020-11-13得票数 1
2回答
为什么fetchData函数是在useEffect中而不是在外部定义的？
链接：
import { useState, useEffect } from 'react'
export default function useFetch(url, options) {
const [data, setData] = useState(null)
const [error, setError] = useState(null)
useEffect(() => {
const fetchData = async () => {
try
浏览 4提问于2020-04-30得票数 11
回答已采纳
为什么我的useEffect react函数在每次页面加载时都运行，尽管给它提供了一个带有query变量的第二个值数组？
useEffect( () => {
getRecipes();
}, [query]);
它不应该只在query状态变量更改时运行吗？除了getRecipes函数之外，我没有其他任何使用useEffect函数的方法。
import React, {useEffect, useState} from 'react';
import './App.css';
import Recipes from './component
浏览 0提问于2020-03-07得票数 0
回答已采纳
在我的React应用程序中，我遇到了一些奇怪的行为，其中setEffect的状态(比如state1)作为第二个参数，在没有调用setState1的情况下改变了另一个变量(而不是状态)。因此，我编写了以下代码，以查看是否会发生相同的情况，并做到了：
import React, { useState, useEffect } from 'react';
function App() {
let [state1, setState1] = useState('');
let count = 0;
useEffect(() => {
co
浏览 1提问于2020-09-25得票数 2
回答已采纳
2回答
我试图在Gatsby页面加载后更新上下文。
按照我的做法，上下文将提供给所有页面，一旦页面加载，上下文就会被更新(使用useEffect来确保它只在组件挂载时发生)。
不幸的是，这会导致无限的呈现循环(可能不在Firefox中，但至少在Chrome中是这样)。
这一切为什么要发生？我的意思是，上下文更新意味着重新呈现提供程序下面的所有组件，但是useEffect应该只运行一次，然后组件挂载。
下面是代码：
无限循环发生在第二页(第一页底部的链接)。
如果我想在页面加载时更新上下文，这里的解决方案是什么？
浏览 3提问于2019-05-13得票数 0
回答已采纳
1回答
嗨，我是新的反应，我正在设置状态和城市，当它的长度为6位时，当我在useEffect中放置整个函数时，它会导致包含setPersonalDetState的错误&我还想使用相同的函数来验证我不能在useEffect中包含它
const intialState = {
city: '',
state: '',
pincode: ''
};
const PersonalDetails = () => {
const [personalDetState, setPersonalDetState] = useState(in
浏览 5提问于2020-07-21得票数 0
回答已采纳
在这方面还有其他几个问题，答案要么是通过ESLint消除依赖投诉(我使用的是类型记录)，要么是做一些其他的事情来允许useEffect的第二个参数是[]。但是，根据React ，这是不建议的。另外，在react文档下面，它说
如果您传递一个空数组([])，效果中的道具和状态将始终具有它们的初始值。当第二个论点更接近于熟悉的componentDidMount和componentWillUnmount心智模型时，通常会有更好的解决方案来避免重复运行的影响。另外，不要忘了在浏览器绘制完之后才会运行useEffect，所以做额外的工作就没什么问题了。
我有以下代码：
useEffect((
浏览 3提问于2019-09-23得票数 21
回答已采纳
假设我们有这样的情况：
const [number, set_number] = useState(1);
useEffect(() => {
// do something
}, [number]);
如果某些计算做到了这一点呢：
set_number(2 - 1);
在这种情况下，useEffect会被触发吗？
浏览 66提问于2021-09-10得票数 0
我使用React将函数从父组件传递给子组件，并试图在useEffect()挂钩中运行它。
亲本
function Parent(props) {
function alertMe() {
alert('me');
}
render (
<div>
<Child alertMe={alertMe} />
</div>
);
}
儿童
function Child(props) {
const { alertMe } = props;
useEffect(() => {
浏览 6提问于2019-10-01得票数 0
我理解，useEffect需要依赖项数组中的依赖项，但是当我将其与useState结合时，将有一个无限循环：
const [valid, setValid] = useState(false);
useEffect(() => {
setValid(true);
}, [valid]};
这就是为什么我用它就像：
useEffect(() => {
setValid(true);
}, []};
因此，我得到：
React Hook useEffect has a missing dependency: 'setValid'.
我怎么才能摆脱警告呢？
浏览 4提问于2021-03-14得票数 0
回答已采纳
5回答
我遇到的问题是在change()函数中。我想在setState运行后调用filteredData()函数。通常，我会使用回调函数来调用filteredData，但是useState不允许回调。我不能使用useEffect，因为它最初会在数据更改之前调用函数。
import React, { useState, createContext, useEffect } from "react";
import data from "../Reducers/ListingsData";
export const GlobalContext = createCon
浏览 0提问于2021-06-13得票数 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
我可以找到类似的问题被问了几十次，但所提供的解决方案对我不起作用。我有一个useEffect钩子，它运行一个函数从我的数据库返回一些数据。
const VenueDetails = ({ venue_details, fetchVenueDetails, id }) => {
React.useEffect(() => {
fetchVenueDetails(id);
}, [venue_details]);
return (<div></div>)
}
id是从我的url <VenueDetails path="/venu
浏览 0提问于2020-12-01得票数 0
回答已采纳
基本上这就是我想要做的。我有一个按钮来调用handleAdd事件，当该事件触发时，我想调用useEffect函数。useEffect()；调用一个函数，该函数根据输入中的值返回不同的api键。但是我意识到useEffect不是那样工作的，只能在代码的“顶层”中被调用。有什么办法可以解决这个问题吗？见下面的例子：
input = "example";
const handleAdd = () => {
//Call useEffect
};
useEffect(() => {
getCoinMarketDataApi.reques
浏览 2提问于2021-04-02得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
云直播活动推荐
腾讯云开发者
