useEffect()函数只运行一次，存储会在以后更新(React钩子)
useEffect()函数是React中的一个钩子函数，用于处理副作用操作。它在组件渲染到屏幕上后执行，可以用来处理数据获取、订阅事件、手动修改DOM等操作。
useEffect()函数只运行一次的特性可以通过传递一个空的依赖数组作为第二个参数来实现。这样，useEffect()函数只会在组件挂载时执行一次，类似于类组件中的componentDidMount()生命周期方法。
存储会在以后更新是指，当组件重新渲染时，useEffect()函数也会重新执行。这是因为useEffect()函数默认会在每次组件更新时都执行一次，除非指定依赖数组来控制其执行条件。
在实际应用中，useEffect()函数常用于处理数据获取和订阅事件等副作用操作。例如，可以在useEffect()函数中使用异步请求获取数据，并将数据存储在组件的状态中。当组件重新渲染时，可以通过更新依赖数组中的值来触发useEffect()函数的重新执行，从而更新数据。
腾讯云提供了一系列与React相关的产品和服务，例如云函数SCF（Serverless Cloud Function）、云开发（CloudBase）、云数据库COS（Cloud Object Storage）等，可以帮助开发者更好地构建和部署React应用。具体产品介绍和文档可以参考以下链接：
- 云函数SCF：https://cloud.tencent.com/product/scf
- 云开发CloudBase：https://cloud.tencent.com/product/tcb
- 云数据库COS：https://cloud.tencent.com/product/cos
通过使用腾讯云的相关产品，开发者可以更高效地开发和部署React应用，提升应用的性能和可靠性。
相关·内容
我使用钩子表单来获取基于用户区域的文章。它可以随时更改，选择输入，以改变文章的位置。
import React, { useState, useEffect } from 'react';
import useForm from 'react-hook-form';
import { getRegions } from '../../services/regions';
import s from './style.module.scss';
function UpdateRegion({ putRegion, region }
浏览 5提问于2020-01-22得票数 1
1回答
这似乎是一个常见的问题，但不知怎的，我根本无法让它发挥作用:我正在尝试从mongoDB数据库读取一些数据。如果我在浏览器中直接调用NodeJS服务器，如
我以JSON字符串的形式获取数据：
{
"pid":{
"ck":"F19909120:525.522.8788.37",
"name":"nilan",
"cID":"0SL8CT4NP9VO"
}
}
但是当我从一个React函数RecordDetails(
浏览 1提问于2022-02-07得票数 0
我试图通过props将一个对象传递给子组件。该值是在useEffect钩子中设置的，在传递给子组件时会丢失。
我曾尝试在一个单独的函数中设置useEffect钩子之外的对象的值，但该值仍然丢失。
import React, { useState, useEffect } from 'react';
function SetValue(props){
let users = {};
useEffect(() => {
users = { user: 'bob' };
})
retur
浏览 2提问于2019-05-16得票数 41
回答已采纳
当我单击MultipleComponent按钮时，函数中的所有日志都返回null。
第二次单击它时，它返回前面的值。
如何在map函数中获取每个日志中的当前状态？
当我在useEffect钩子中调用函数时，useEffect会在第一个呈现之后运行。我不希望它在第一次渲染之后运行。
import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import { observer } from "mobx-react-lite";
func
浏览 2提问于2022-08-01得票数 0
我正在学习React useEffect钩子，特别是dependency array。有如此简单的
import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
function App() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked
浏览 4提问于2022-02-08得票数 -1
回答已采纳
2回答
我目前正在构建一个与TypeScript反应的web应用程序。我正在尝试获取一个定制的API。然而，他们中的许多人正在回归。在将它们存储在状态后，如何访问整个API来对它们进行过滤？
import React, { useEffect, useState } from "react";
import axios from "axios";
interface Invoice {
id: number;
customer_id: number;
customer_name: string;
date: string;
total_invoic
浏览 2提问于2021-06-29得票数 1
回答已采纳
我想知道在组件中使用useEffect钩子和自定义钩子有什么不同。 例如 如果我有一个功能组件( component )并在其中直接使用useEffect钩子 import React,{useEffect} from 'react';
function Component(){
useEffect(()=>{
//some code //callback fires after component renders
},)
return (<div>Component</div
浏览 21提问于2020-06-12得票数 3
回答已采纳
我正在尝试使用Typescript创建一个React功能组件，它将从API获取数据，然后将数据发送到另一个组件，但是，我得到了一个错误：" error : Too loop- renders . React限制呈现的次数，以防止无限循环。“ 请提供任何建议！ useEffect(() => {
await axios.get('https://quote-garden.herokuapp.com/api/v3/quotes/random').then((resp) => {
setQuote1(resp.data.data[
浏览 133提问于2021-10-05得票数 0
回答已采纳
2回答
我无法让setState更新到下面代码中的新值。
我试着让它用chart.js创建一个动态的线条图。我正在从虚拟API中获得正确的数据，但我无法将它状态到我的useState。
import React, { useState, useEffect } from "react";
import { Line } from "react-chartjs-2";
import axios from "axios";
function Graph(){
const [chartData, setChartData] = useState([]);
浏览 4提问于2022-05-03得票数 2
因此，我有一个组件，用于处理表单：
import React, { useState } from "react";
export const useForm = (callback: any, initialState = {}) => {
const [values, setValues] = useState(initialState);
const onChange = (event: React.ChangeEvent<any>) => {
setValues({ ...values, [event.target.name]
浏览 4提问于2022-09-27得票数 0
回答已采纳
我正在查看React文档，它提到
--如果您熟悉React类生命周期方法，可以将useEffect Hook看作是componentDidMount、componentDidUpdate和componentWillUnmount的组合。
假设我现在有一个类组件，在componentDidMount中，我正在做这样的事情
componentDidMount() {
MapboxGL.setTelemetryEnabled(false);
}
据我所知，组件在生命周期中只被调用一次吗？
如果我用的是“反应钩”，那就像这样
useEffect(() => {
Ma
浏览 3提问于2020-05-29得票数 5
1回答
我试图使用自定义钩子来发出HTTP请求，然后使用还原器更新组件中的状态。
钩子正确运行，我可以从请求中获得响应，但不能在调度函数中使用响应数据。
以下是代码：
HTTP钩子：
import React, { Fragment, useState, useEffect, useReducer } from 'react';
import axios from 'axios';
export const useHttpRequest = (initialData, initialURL) => {
const [url, setUrl] = useSta
浏览 4提问于2020-07-13得票数 0
回答已采纳
自定义挂钩'useSemiPersistenceState‘是在包括useEffect挂钩的应用程序组件外部实现的 const useSemiPersistentState = (key, initialState) => {
const [value, setValue] = React.useState(localStorage.getItem(key) || initialState);
React.useEffect(
() => {
localStorage.setItem(key, value
浏览 14提问于2020-06-26得票数 0
我承认我可能永远不会理解钩子，但是这个断言是否正确，即基于属性的useEffect应该只在属性发生变化时运行？在下面的代码中，两个useEffects都在第一次呈现comp时运行。为什么？
function Comp() {
const [search, setSearch] = useState();
useEffect(() => {
console.log("this should run once on comp load")
}, [])
useEffect(() => {
console.log("this
浏览 0提问于2020-07-26得票数 0
我不太明白什么时候“挂载”的反应，什么时候触发useEffect和清理功能。
在下面的例子中。看来useToggle挂钩是“保税”(正确的术语？)对于App，每次变量isOn被更新时，绑定的App组件都会被重新呈现。但是，清理函数也会被调用。我试着比较它以响应类组件的生命周期。
如果我的理解是错误的，请纠正我。
参考:来自的编辑图表
生命周期的useEffect(updateFunc => cleanupFunc, [dependency array])
const { useReducer, useEffect } = React;
// Purposefully move
浏览 4提问于2020-10-16得票数 2
回答已采纳
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
回答已采纳
我是新的反应，并试图制作一个加载/问候页面，导航到下一个在几秒钟后显示。在function路由器v6中，我们有允许您控制导航的useNavigate()钩子，我正在使用它通过在useEffect()钩子中设置一个超时来成功地调用导航函数。但是，编译器正在抱怨我缺少一个依赖项。不过，我只希望它运行一次，而不是当navigate发生变化时。做这件事最好的方法是什么？
谢谢!
import { useEffect } from "react";
import { useNavigate } from "react-router-dom";
function Gree
浏览 33提问于2022-09-14得票数 4
回答已采纳
如果我用这个
useEffect(() => {
dispatch(fetchToDos())}, [debouncedToDo, loginInfo.isLogin])
我收到警告
React缺少一个依赖项：“调度”。要么包含它，要么删除依赖数组react/react。
如果我在依赖数组中包含了“分派”，那么警告就消失了。
如下所示：
useEffect(() => {
dispatch(fetchToDos())}, [dispatch, debouncedToDo, loginInfo.isLogin])
浏览 2提问于2021-04-08得票数 4
回答已采纳
1回答
我试图传递一个键值对的对象，其值是从子组件到父级状态的字符串数组。这些值将来自UI-Kitten的多选择组件，并将作为对象传递给父组件。
我理解在父组件和子组件之间传递数据的方式，以及useEffect在组件中用于componentDidMount或任何有条件触发的效果的用法。但这个案子相当复杂。
我可能会将整个子组件转储到父组件中，因为我尝试过复制类似的东西，也就是说，每当用户从多个选择中选择/取消一个选项时，我就会更新键值对的对象。希望我能带着孩子-父母，这样父母就不会乱七八糟的，因为子组件是相当长的。
我希望我能得到一些帮助。谢谢!
父组件(状态technologyExperience不
浏览 3提问于2021-05-27得票数 0
回答已采纳
通过使用React，我有以下使用useEffect()的功能组件
import React, { useEffect } from 'react';
import { connect } from 'react-redux';
const MessagingComponent = React.memo(({ loadMessages, messages, ...props }) => {
useEffect(() => {
loadMessages();
});
return <div {...props}>Th
浏览 1提问于2019-04-03得票数 20
回答已采纳
我在react功能组件中使用useEffect从外部API获取数据，但它在页面上呈现时一直调用API端点。我正在寻找一种方法来停止在组件上渲染时运行useeffect
浏览 0提问于2021-05-20得票数 0
2回答
我有一个功能组件
import React, { useState } from 'react'
export default function AboutUs() {
const [counter,setCounter] = useState(0);
const clicked = () => {
setCounter(counter+1);
}
return (
<div>
<p>you clicked {counter} times</p>
<button onClick
浏览 1提问于2021-07-28得票数 1
回答已采纳
下面的代码有一个函数displayQuotes，它导入一个"next“是引号的可观察对象。对于每个新的报价，我想使用react挂钩更新报价的状态。我创建了一个自定义钩子，它接受一个可观察对象，订阅它，并为每个新值设置状态。我发现，尽管我记录了所有新的传入引用，但似乎在第一次之后，我的setState从未被调用过。对于为什么会发生这种行为，有什么建议吗？
代码：
const UseCustomHookForObservable = (observable, setState) => {
useEffect(() => {
let subscription=obse
浏览 0提问于2020-06-17得票数 1
2回答
我已经创建了一个react原生CLI项目。现在，每当用户来到我的屏幕时，我都想要更新一些值。在我的主屏幕上，我有三个顶部选项卡。当用户单击第三个选项卡时。我每次都需要更新一些值。
对于这三个选项卡，我使用：ScrollableTabView
import ScrollableTabView, { DefaultTabBar } from 'react-native-scrollable-tab-view';
我每次都使用下面的代码来更新值。但这只是一次召唤：
useEffect(() => {
alert('i called');
})
然后我试着：
浏览 0提问于2020-06-09得票数 0
我想用我在中保存的对象覆盖用户，但是它不能工作。
注意，组件被称为索引，因为我使用的是next.js
import React, { useState, useEffect } from 'react';
import { loadUser } from '../utils/user';
const Index = () => {
const [ user, setUser ] = useState({});
async function restore(){
const loadedUser = await loadUser();
浏览 2提问于2020-10-28得票数 1
回答已采纳
我有一个计数器变量，我需要使用一个间隔更新。我遇到的问题是setInterval无法访问组件当前状态。在寻找解决这个问题的方法时，我无意中发现了Dan的一篇博客文章，它实现了一个自定义钩子来规避这个问题。
但是，在使用他的代码时，我立即遇到了以下错误：
Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
据我所知，我没有违反任何钩子规则，我使用了几个react站点调试方法来查看是否有react的重复版本。从下面的代码中，我是否违反了一条我不知道的钩子规则？
浏览 2提问于2021-03-10得票数 1
回答已采纳
我想将useSelector与useEffect一起使用，因为dispatch(searchEvents(location.search))返回一个promise，并且只有在promise解析后，我才能使用react-redux中的useSelector()挂钩，因为来自useDispatch()的react-redux dispatch将更新我将用来呈现列表的redux存储 const [text, setText] = useState("");
const [priceFilter, setPriceFilter] = useState("");
浏览 51提问于2021-06-27得票数 0
当组件useState更新时，我希望在Home函数中从组件中获得相同的值，并且Home不应该重命名。
import { useState, useEffect } from "react";
function Component() {
const [count, setCount] = useState(0)
useEffect(() => {
console.log("rerender")
})
useEffect(() => {
let interval = setInterval(() => {
浏览 6提问于2022-11-10得票数 0
回答已采纳
我在类组件中缓存数据方式如下: 1.在componentDidMount中进行异步API调用2.通过redux获取API响应和分派数据3.通过将状态映射到prop来使用响应数据 我想要做的是在函数组件(它在类组件上工作)中的useEffect内获得映射redux状态值的API响应后，立即缓存数据。但是我想知道我应该如何让它在函数组件中工作) export class MyClassComponent extends React.Component {
private readonly _myCachedData = {
'data1': {}
浏览 24提问于2019-12-30得票数 0
1回答
我在react本机中有一个react组件，我想手动处理hardwareBackButton。在传递给backHandler的hardwareBackPressListener函数中，当redux状态为true或false时，我有不同的行为。
const brandSelected = useSelector(state => state.map.brandSelected);
我的组件中有这个useSelector来访问状态。我有useEffect函数来监视状态的变化：(当状态变为true或false时，它正确地工作并记录状态)。
React.useEffect(() => {
浏览 6提问于2021-12-18得票数 2
回答已采纳
2回答
react钩子中的无效穷举dep
、、、、
我正在使用一个react挂钩通过axios从covid api获取数据，但是它抛出了一个错误
React Hook useEffect has a missing dependency: 'countries'. Either include it or remove the dependency array react-hooks/exhaustive-deps
哪些国家是我的州
代码：
const [countries,setCountries]=useState([]);
useEffect(()=>{
axios.get('https://
浏览 0提问于2020-11-30得票数 1
具有如此简单的反应成分：
import React, { FunctionComponent, useEffect, useState } from 'react';
export function useMediaQuery(query:string) {
console.log("useMediaQuery")
useEffect(() => {
console.log("useEffect outer")
// ...
});
}
const Sidebar:
浏览 10提问于2022-02-10得票数 0
我很清楚React的"useState“钩子是如何工作的。State -是映射到特定组件的值列表，还有useState调用的索引，它请求状态值索引。当renderer封装组件时，它将其写入useState有权访问的外部引用中，因此它通过useState调用索引从“当前”组件的状态列表返回状态值。但我不知道如何反应，如何识别"useEffect“中的依赖关系并将其链接到实际状态，这显然是数字和字符串之类的简单值。那是怎么做到的？
import React from 'react'
function Component() {
const [plainStri
浏览 5提问于2020-03-05得票数 0
回答已采纳
使用一个简单的卡片组件，我通过使用UseEffect从一个API加载数据。目的是在加载组件时，将数据加载一次。
问题是数据在加载时不能正确加载，而是在组件更新后重复加载。如何使它在加载页面时加载数据一次，而不是加载之后呢？
我省略了API url，但它是经过测试的，并从后端正确地返回数据。
卡组件：
import React from 'react';
import { Card, CardImg, CardBody, CardTitle, CardSubtitle, Container, Row, Col } from 'reactstrap';
impor
浏览 1提问于2022-03-31得票数 2
回答已采纳
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
回答已采纳
1回答
因此，我尝试为我的web构建一个主页，其中包括很少的几类书籍，我试图从我的数据库中获取书籍，并将它们保存在状态中，并将它们过滤到正确的类别中，但是当我尝试在一个axios.get中执行useEffect时，我会遇到一些问题。
的第一个问题是，如果我不把方括号放在useEffect 的末尾，我会进入无穷大循环，第二个问题是，当useEffect第一次工作时，如果每件事情都正常，我就会得到状态并将它们映射到web，但是当我重新加载页面时，会得到一个空页面，这意味着状态值发生了变化。
我在这里添加来自我的homePage组件的代码
我试着用两种方式做useEffect，但是结果没有差别。
impor
浏览 2提问于2022-11-24得票数 0
我理解useInterval允许将函数组件作为参数传递，因此我试图利用这一点并使用函数组件中使用的值来设置状态。在下面的代码中，我希望ExecutionsPage获取作为数组从useFetchProjectScansByUser()钩子返回的projectScans和isProjectScansFetchComplete：
1 const ExecutionsPage: React.FC = () => {
2 let user:string|null = sessionStorage.getItem('user')
3 const UPDATE_TABL
浏览 1提问于2022-06-15得票数 2
回答已采纳
2回答
我正在用react，redux和firebase制作一个不和谐/松弛的克隆应用程序...
将用户添加到集合可以很好地工作。我有一个加号图标，它呈现一个模式，以添加一个新的频道。提交时，调用一个函数将新添加的频道存储在我的Redux全局状态中，并将其添加到firebase RealTime数据库中。(我可以在firebase控制台中看到)
它会正确地添加到数据库中。在我的' channel‘组件中，我有一个侦听DB的函数，当添加一个通道时，它会给我一个快照。
问题是:它给了我两次相同的快照。
我尝试过使用NPM包'react-firebase-hooks‘以及不使用它们。我总是得
浏览 9提问于2019-08-08得票数 0
3回答
在创建了一个函数来设置值数据、当前用户loggedin并在useEffect中调用它之后，我收到了一条警告消息。下面是代码：
import React, { useEffect, useState } from "react";
...
const AddPost = () => {
const userStorage = sessionStorage.getItem('user');
const [values, setValues] = useState({
userId: '',
authorName: &#
浏览 1提问于2020-11-10得票数 0
回答已采纳
我有一个钩子谁捕获引用DOM元素的getBoundingClientRect对象。问题是，在第一次渲染时，它返回null，而我只需要在组件上第一次渲染时获取该值。 我在一个功能组件中就是这样使用的： const App = () => {
// create ref
const rootRef = useRef(null);
// get Client Rect of rootRef
const refRect = useBoundingClientRect(rootRef);
useEffect(()=> {
// return "
浏览 97提问于2019-10-05得票数 0
回答已采纳
4回答
在调用setInterval函数之前，我已经将状态设置为true。但是，即使使用状态的新值来触发useEffect钩子，它也没有反映在setInterval函数中。
这里的代码沙箱：
let interval;
const Component = () => {
React.useEffect(() => {
console.log('State updated to', state);
});
const [state, setState] = React.useState(false);
const on = () => {
浏览 1提问于2019-08-13得票数 4
回答已采纳
上下文
我已经构建了一款应用程序，可以在react中将outlook帐户中的邮件呈现到网页中。我正在尝试将一个“已查看”的布尔值设置为redux store提供的类属性，并在组件中对其进行更改(该更改必须影响redux才能管理整个应用程序的更改)
问题
正如你可能在下面的代码中看到的，我用redux reducer中的给定信息启动了构造函数中的实例变量，我已经用一堆控制台日志测试了动作创建器是否成功地更新了存储上的信息，它确实做到了。我的问题是我的实例变量(this.viewed)没有使用redux的reducer信息进行更新(实际上是更新)
import React from "re
浏览 10提问于2020-05-19得票数 0
回答已采纳
我可以使用类组件中的功能组件吗？我将调用从类组件中的函数组件中提取的函数。但它带来的错误如下所示。
未处理的拒绝(错误)：无效钩子调用。钩子只能在函数组件的主体内调用。这种情况可能发生的原因如下之一，
因此，我试图在functional中调用它，但在中，即使在functional中，我也得到了与在类组件中调用它时相同的错误。
功能部件
import React, { useEffect } from 'react';
import { UseWalletProvider, useWallet } from 'use-wallet';
import
浏览 30提问于2021-12-16得票数 2
回答已采纳
1回答
我的handleKeyUp函数没有在状态中使用任何新值。在函数中，playingTrackInd总是等于-1，即使状态已经被更新为playingTrackInd是另一种状态。
import React, { useEffect, useRef, useState } from 'react';
import { Container } from 'react-bootstrap';
export interface Track {
artist: string,
title: string,
uri: string,
album
浏览 2提问于2022-05-30得票数 1
回答已采纳
我有一个导航栏，其中有不同的链接登录和未登录。我在本地存储中设置了一个名为loggedIn的变量。我的useEffect钩子应该监听本地存储，一旦检测到变量，就更新导航栏链接。我确实看到导航链接发生了变化，但只有在页面刷新之后，这显然是不理想的，也不应该是如何工作的。我是不是做错了什么？
import React, {useState, Fragment, useEffect} from 'react';
import {Link} from 'react-router-dom';
import './Navbar.css';
const Na
浏览 9提问于2021-02-19得票数 0
我有这两个文件，WordList.js：
import React, { useEffect, useState } from 'react';
import WordListItem from "./WordListItem";
function WordList(props) {
var cards = props.cards;
var cardsElements = null;
var [ id, setId ] = useState('');
function contextMenuClickHand
浏览 3提问于2021-07-28得票数 0
我试图使工作搜索输入。我通过Hooks/useCountries组件中的useEffect中的获取数据进行过滤，在App.js中监听输入，并在搜索栏组件中传递handleChange的道具。有东西不见了，我不知道是什么。
下面是Hooks/useCountries和组件的链接
import React, { useState, useEffect } from "react";
export default function useCountries(search) {
const [data, setData] = useState([]);
const [erro
浏览 4提问于2020-09-11得票数 0
下面的错误有时会发生，我不知道为什么。似乎每一段代码都正常工作，但只有一个错误发生。
React "useEffect“不能在回调中调用。必须在或自定义React函数-钩子/钩子规则中调用React，以搜索关键字以了解每个错误的更多信息。
import { useEffect, useState } from 'react'
import { useAuthContext } from 'src/contexts/Auth'
import { brandRepository } from 'src/repositories/BrandRe
浏览 12提问于2022-04-17得票数 2
回答已采纳
所以我有一个使用useEffect()钩子的React组件：
const [stateItem, setStateItem] = useState(0);
useEffect(() => {
if (condition) {
myFunction();
}
}, [stateItem]);
const myFunction = () => {
return 'hello';
}
React给我一个警告，告诉我'myFunction‘是一个缺失的依赖项。我(想我)理解为什么，我已经读过许多类似的问题，要求或多或少相同的东西，但答案总是“
浏览 0提问于2019-11-29得票数 4
我目前正在研究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
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
