React:仅在数据更改时调用useEffect
React是一个用于构建用户界面的JavaScript库。它通过将用户界面分解为组件来实现可重用性和模块化，使用虚拟DOM来提高性能和效率。
在React中，useEffect是一个React Hook函数，用于处理副作用操作。副作用是指在组件渲染过程中需要进行的一些操作，如数据获取、订阅事件、修改DOM等。
useEffect接受两个参数：一个副作用函数和一个依赖数组。副作用函数是在组件渲染完成后执行的函数。依赖数组用于指定副作用函数依赖的变量，只有当依赖数组中的变量发生改变时，才会重新调用副作用函数。
在这个问答中，"仅在数据更改时调用useEffect"意味着需要在useEffect中指定依赖数组，只有当指定的数据发生改变时，才会触发useEffect中的副作用函数。
以下是一个示例：
import React, { useState, useEffect } from 'react';
const Component = () => {
const [data, setData] = useState('Initial Data');
useEffect(() => {
console.log('Effect is triggered');
// 在这里执行副作用操作
}, [data]); // 只有当data发生改变时，才会触发副作用函数
const handleClick = () => {
setData('Updated Data');
};
return (
<div>
<button onClick={handleClick}>Update Data</button>
</div>
);
};在上面的示例中，当按钮被点击时，会更新data的值为'Updated Data'，这将导致useEffect中的副作用函数被触发并执行。如果没有指定依赖数组，useEffect中的副作用函数将在每次组件渲染完成后都被调用。
推荐的腾讯云相关产品和产品介绍链接地址：
- 云开发(CloudBase)：https://cloud.tencent.com/product/tcb
- 云函数(Cloud Function)：https://cloud.tencent.com/product/scf
- 云数据库(Cloud Database)：https://cloud.tencent.com/product/tcb-database
- 云存储(Cloud Object Storage)：https://cloud.tencent.com/product/cos
相关·内容
我是React的初学者，遇到了一些问题。如下所示，我们可以看到，对于下面的计数器功能组件，useEffect只能调用一次(因为在依赖数组中，我没有指定计数状态)。但是为什么间隔回调属于first render不能在每次触发间隔时发送更新指令？
import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
function Counter() {
const [count, setCount] = useState(0);
useEffect
浏览 2提问于2020-05-18得票数 1
1回答
容器
import { InputField } from './InputField';
const sleep = (time: number) => new Promise((res) => setTimeout(res, time, ''));
export const Container = () => {
const [inputValue, setInputValue] = React.useState('');
React.useEffect(() => {
(async () =&
浏览 3提问于2022-08-21得票数 0
回答已采纳
所以我有这个自定义的钩子：
import sortBy from 'lodash/fp/sortBy';
import { useState, useEffect } from 'react';
/**
* Custom effect that enables data sorting.
* It is triggered every time when sort order or data has changed.
*
* @param {*} initialSort
* @param {*} data
*/
function useSortin
浏览 3提问于2019-04-03得票数 5
通过使用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
回答已采纳
我正在学习useEffect和useCallBack钩子。我要做的是useCallBack中添加一个函数，并确保在单击按钮之前屏幕不会调用该函数。下面是我的示例代码。目前，它在我单击按钮之前调用useEffect中的函数。我的目标是点击按钮，然后用useCallBack函数触发useEffect函数。这还是个新手，谢谢你的帮助。 import React, {useState, useEffect, useCallback} from 'react';
import {Button, StyleSheet, View} from 'react-native';
浏览 34提问于2021-02-27得票数 0
回答已采纳
我是react js的新手。我有一个函数和一个GET API请求。我需要在功能组件中分派API操作。当我在函数组件中调用dispatch函数时。它被多次重新渲染(多个请求到来)。当我在useEffect中使用dispatch时，我的应用程序接口不会被调度。
不调用useEffect dispatch函数：(多次调用)
export default LogoCard {
let id=1;
const dispatch = useDispatch();
dispatch(viewLogDetails(id));
}
使用useEffect调用dispatch函数。(未使用
浏览 3提问于2021-10-21得票数 0
假设我有一个react钩子组件
const Child = (props) => {
useEffect(()=>{
// fetch data
...
});
return (
//Displays fetched data
)
}
然后在父组件中使用它
class Parent extends Component {
render () {
... <Child ... /> ...
}
}
我的问题是，如果Parent在其状态改变(但与Child无
浏览 9提问于2020-02-19得票数 0
回答已采纳
我可以在useEffect块之外直接在FriendStatus组件中使用handleStatusChange事件处理程序吗？
import React, { useState, useEffect } from 'react';
function FriendStatus(props) {
const [isOnline, setIsOnline] = useState(null);
useEffect(() => {
function handleStatusChange(status) {
setIsOnline(status.isOn
浏览 3提问于2020-01-25得票数 1
1回答
我是非常新的反应和节点，我已经设法为一个简单的待办事项列表创建了一个API。我从api中获取数据并将其显示在屏幕上。
如果useEffect()钩子上的依赖数组为空，它将只呈现一次而不循环。但是，如果我添加了一个新的Todo，它将不会更新列表，除非我刷新。因此，我将todos状态放入依赖数组中，然后在添加它时将显示新项，但是如果我查看dev工具中的网络选项卡，它将在无限循环中命中api。我做错什么了？
以下是代码：
应用程序
import React, { useState, useEffect } from "react";
import Todo from "./c
浏览 2提问于2020-07-07得票数 0
回答已采纳
我有一个带有登录/注销功能的react应用程序。我希望应用程序在重新加载后保持登录，为此我使用cookies。问题是，在我实现了我认为应该可以工作的东西之后，我得到了一个“警告，超过了最大更新深度。当组件在useEffect中调用setState，但useEffect要么没有依赖项数组，要么每次呈现时都有一个依赖项更改时，就会发生这种情况”消息。
我做错了什么？
非常感谢！
下面是代码。
sessions.ts
import React from "react";
import * as Cookies from "js-cookie";
export con
浏览 4提问于2020-04-29得票数 2
我想知道在组件中使用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
回答已采纳
看起来react-query很流行，所以我尝试将react-query添加到我现有的代码中。
下面的代码是exist代码。它使用钩子(useEffect & useState)、axios并返回响应数据。
import { useState, useEffect } from 'react';
import { apiProvider } from 'services/modules/provider';
import { useLoading } from 'components/Loading/Loading';
export c
浏览 1提问于2021-05-18得票数 0
1回答
我目前正在学习如何在React中使用钩子，我目前使用的是useEffect。在我最近的几个项目中，我一直使用相同的API从(Opendota)中提取数据，只是调用数据的方式不同而已。有什么办法解释为什么这个不起作用吗？我想当涉及到useEffect时，我错过了一些重要的东西
heroes.services
import React from 'react'
const getStatsById = heroId => async () => {
const resp = await fetch("https://api.opendota.com/a
浏览 0提问于2020-02-25得票数 0
在SPFx web部件的主组件中，我有一个在React.useEffect中运行的数据加载
const [jobsGets, setJobsGets] = React.useState(0);
React.useEffect(() => {
{Some code to get data from SharePoint}
});
}, [jobsGets]);
因此，当"jobsGets“的值发生变化时，将发生刷新，对吗？
此组件调用另一个组件，该组件调用另一个组件，最后一个组件具有一个事件，该事件应通过更改"jobsGets“进行刷新。如果我写一个函数
浏览 0提问于2020-06-01得票数 0
我有一个Products组件，它显示一个类别的产品。CategoryId是从路由参数中获取的，然后用户可以对产品进行分页。因此有两个useEffect，一个是当categoryId改变时，另一个是当当前页码改变时。如果我使用具有两个依赖项(categoryId和currentPage)的一个效果，我无法找到将当前页码重置为1的方法。(当用户在类别1中并转到2页时，我希望在类别更改时重置页码) import React from "react";
import {
useProductState,
useProductDispatch
} from "../co
浏览 30提问于2019-09-03得票数 2
回答已采纳
1回答
我需要从localStorage中删除一个项目，因为它是从CMS数据中删除的。 因此，我需要在我的useEffect()钩子中访问cmsData collectionId，并为每个集合提供一个新状态。我可以通过cmsData访问in，但是我不确定应该如何检查更改，以及如何为useEffect()钩子中的每个集合分配新状态。 (现在我的代码只是在重新加载时重置整个localStorage。) 你能给我一个提示吗？ import React = require("react");
import {PropsWithChildren, useEffect, useState}
浏览 13提问于2021-04-01得票数 0
我正在实现服务器端将呈现给react和redux应用程序。因此，对于SSR，在服务器上获取数据，然后使用renderToString方法生成页面，然后在客户端获取useEffect中的数据，如下例所示。
现在的问题是，在获取服务器上的数据之后，客户端再次在useEffect中调用useEffect。所以它调用相同的API 2次，这是错误的。我不能删除useEffect，因为当我导航页面(反应路由器链接)时，应该只在客户端为SPA获取数据。
那么，当第一次打开页面时，我如何在客户端禁用useEffect中的api调用，但是当我们导航页面时，它应该正常工作，并在useEffect中进行API调用？
浏览 2提问于2021-12-31得票数 0
我在React Native应用程序中有一个规范化的Redux存储。 我的减速器的结构是： {
byId: {},
allIds: []
} 在我的组件中，我使用useSelector钩子获取Redux状态的切片： const categories = useSelector((state: AppState) =>
state.products.allIds.map((id) => state.categories.byId[id.toString()])
); useSelector中的逻辑只是将byId对象转换为数组。 当我将categories数组设置为依赖项
浏览 127提问于2021-10-23得票数 0
回答已采纳
2回答
我正在点击主页上的一个帖子，它将把我送到被点击的帖子的页面。在这个组件的渲染过程中，我从useEffect中分派了一个动作，它将从后端获取post数据。但是useEffect不会被触发一次，但是页面渲染会被触发两次。请帮帮忙
import {
Container,
Typography,
LinearProgress,
CircularProgress,
Paper
} from '@material-ui/core';
import React, {
useEffect
} from 'react';
import {
getP
浏览 0提问于2021-09-01得票数 1
当我从父组件(Post)使用usePost hook调用setPost时，为什么这会导致无限的重新渲染器？是什么导致了这个错误？ function Post({ activePostId }) {
const { status, post, setPost, error, refetch } = usePost(activePostId)
const [savePost, savePostStatus] = useSavePost()
setPost('SetPost')
const onSubmit = async (values) => {
浏览 23提问于2021-05-08得票数 0
回答已采纳
我正在尝试使用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
回答已采纳
React hooks提供了使用useEffect模拟生命周期方法componentDidUpdate的可能性，而无需依赖：
useEffect(() => {
// componentDidUpdate
});
如何检测某些道具是否要使用react钩子进行更新？
需要在一些更改之前执行一些代码。
浏览 0提问于2020-05-26得票数 0
1回答
我有一个简单的购物网站，数据来自一个无头CMS系统。我正在使用nextJS/React来构建站点。当用户向购物车添加商品时，我想使用firebase来持久化状态，因为用户浏览不同的页面。但是，当用户导航到不同的页面时，我会丢失状态和firebase中的所有数据。主要的问题是我不能将初始购物车状态设置为firebase数据。我如何解决这个问题，这样我就可以使用firebase数据来持久化cart状态？ import React, { useState, useEffect } from 'react';
import Layout from './../componen
浏览 28提问于2020-10-19得票数 0
我有一个按钮，应该按一些数据到一个web服务器。但是，我得到了一个错误：
“未登录错误:无效的钩子调用。钩子只能在函数组件的主体内调用。这可能发生在以下原因之一：
您可能有React和呈现器的版本不匹配(例如React )。
你可能违反了胡克斯的规则
您可能在同一个应用程序中有多个React副本“
这是当我按submit按钮时运行的代码：
const handleSubmit = (e) => {
if (local_id != null) {
useEffect(async () => {
try {
let res = await
浏览 7提问于2022-10-04得票数 0
在我的useEffect代码中，我分派了一个从片中获取的操作。
但是它会抛出错误"React Hook useEffect has missing dependencies“，因为在钩子内部我正在使用操作和分派
...
const { actions } = useDataListSlice();
....
useEffect(() => {
dispatch(actions.loadInitialState());
}, []);
我可以向依赖数组添加操作和分派，但我不确定在其中添加操作和分派是否正确
浏览 2提问于2021-06-15得票数 1
1回答
我能够构建登录功能与react + springboot + postgres。登录后，当JWT存储在本地商店中时，我的应用程序重定向到我正在为其呈现/profile组件的<Profile />页面，如下所示：
Profile.js
import React, { useState, useEffect } from "react";
import UserDataService from '../services/user.services'
export default function ProfileModule(props) {
浏览 2提问于2021-06-10得票数 1
回答已采纳
我想使用Provider、Context和useEffect从后端获取一个数组：
import React, {useState, useEffect} from 'react'
const UsersContext = React.createContext()
const fetchUsers = async () => {
const url = 'http://localhost:3000/users'
const response = await fetch(url)
console.log('response',
浏览 21提问于2019-11-01得票数 0
回答已采纳
我有这个组件，它需要获取数据，将其设置为state，然后将其传递给子组件。有些数据也需要在上下文中设置。我的问题是，使用useEffect (一旦被称为API )，它将为我需要执行的每个setvalue()函数重新呈现。由于状态正在改变，我尝试将一个空[]数组传递给useEffect，但重呈现的次数仍然相同。目前，数组正在对set...functions进行配置，以防止重复抛出警告。
有更好的方法来避免这么多的重呈现吗？
const Home = (props) => {
console.log("TCL: Home -> props", props);
浏览 2提问于2020-01-06得票数 9
我目前正在为Commerce.js应用程序接口做React.js结账教程。 当我单击购物车上的结帐按钮时，它会将我带到结帐页面，并生成应该生成的结帐令牌，但我注意到，当我重新加载结帐页面时，控制台显示以下错误：Image of errors。 下面是Checkout Page的代码： import React, { useEffect, useState } from 'react';
import { commerce } from '../../lib/commerce';
import './styles.css';
const Che
浏览 15提问于2021-11-10得票数 2
回答已采纳
我正在尝试从会话中获得结果，并在react组件中设置它的状态。但是每次我得到内存泄漏问题时，由于这个问题，我无法将会话状态设置为true。
我的useEffect代码如下所示：
useEffect(() => {
let mounted = true;
getSession()
.then(session => {
console.log('session: ', session);
if (mounted) {
setStatus(true);
}
})
.catch(e => {
浏览 0提问于2021-06-28得票数 0
我正在使用useEffect()从API中获取数据。在页面加载时，我希望这些数据填充到react-select下拉列表中，并且初始选择的值是字典列表中的最后一个字典。 import React, { useEffect, useState } from "react";
import Select from 'react-select';
function BiteroInfoPage() {
// Initate array of helados dictionaries and their state
const [dropDownOptions
浏览 60提问于2021-09-23得票数 0
1回答
我有一个组件，在用户单击按钮后，会出现一条消息，并且应该在3秒后消失。我正在尝试使用useEffect启用超时，但无法使其正常工作：
const { useState, useEffect } = React
const SectionHeader = (props) => {
const {title, button, link, type} = props;
const [copy, setCopy] = useState(false)
const [showMessage, setShowMessage] = useState(true);
浏览 4提问于2021-10-19得票数 0
我有一个函数，应该在unmount中调用。但它会在第一次挂载时调用。有什么办法可以解决这个问题吗？ import React, { useEffect, useState } from "react";
import "./styles.css";
import Modal from "./Modal";
export default function App() {
const [modal, setModal] = useState(false);
useEffect(() => {
return () =&g
浏览 23提问于2020-09-25得票数 1
回答已采纳
所以我有这个应用程序，它有针对不同api端点的大约6个提取函数，我在我的终端上收到了一个警告错误--相同的函数名，表明我应该将它包含在我的useEffect的依赖数组中。我的函数在useEffects之上。这个过程是在第一次加载时，我想让它们全部获取，然后只有当它们选择另一个源或类型时才会再次获取--它完成了我想要的工作，但为什么我会看到这些警告呢？
useEffect(() => {
fetchTtype()
fetchSource()
fetchSet()
}, [chosenType, chosenSource])
useEffect(() =>
浏览 1提问于2022-10-07得票数 0
回答已采纳
我正在获取useEffect内部的数据，打算用获得的数据更新useState。即使控制台日志显示收到数据，我仍然在oneCrypto状态值中得到null。意识到这与useState中缺少第二个参数有关。当add []为空数组时，我的oneCrypto显示为空。当我在数组中设置oneCrypto作为依赖项时，我的应用程序崩溃了-太多的请求，控制台日志反复打印收到的数据，我不明白为什么……请帮帮忙。 import React, { useState, useEffect } from "react"
import { useParams } from "react-rou
浏览 36提问于2020-10-14得票数 0
回答已采纳
1回答
我有父和子组件，如下所示：
父级
import React, { useEffect, useState } from "react";
import Cmp1 from "./Cmp1";
const App = () => {
console.log("render App");
const [parentState, setParentState] = useState(null);
const updateParent = state => {
setParentState(state);
};
浏览 0提问于2020-01-31得票数 1
回答已采纳
我刚开始使用React Hook refs。我遵循了几个代码示例，所有示例都引用了useRef，但代码根本不起作用。然而，当我将其更改为createRef时，它就完美地工作了。因此我很好奇这两个函数之间的区别是什么？
// Near the top of my component
let companyNameRef = React.createRef();
// A useEffect added simply to give focus to a particular input element the first time the component is loaded
useEffe
浏览 1提问于2019-09-16得票数 1
1回答
当我与某个状态管理器一起使用(我使用的是recoil.js)时，我尝试用react更新状态，它只在状态与原始状态不同时才调用useEffect。当我在讨论组件重登程序的堆栈溢出时，他们谈论的是类组件，以及每次调用setState时如何呈现。这只是两个组件类型之间的区别，还是我只是误解了它？
这是我对函数组件的代码测试：
import React, {useEffect} from 'react'
import ReactDOM from 'react-dom'
import {atom, useRecoilState, RecoilRoot} from '
浏览 4提问于2021-01-12得票数 1
回答已采纳
2回答
多次响应useEffect呈现
、、、、
我是新来的胡克斯。我用componentDidMount编写了一个项目。
现在我正在学习钩子，用钩子重写这个项目。我想先获取数据并在控制台上打印出来。
然而，它呈现3次。这可能是因为我在useEffect中使用了2 setState。但是，在其中一种方法中，我将数据设置为数据数组，而在另一种情况下，我保留了spinner控件的加载值。如何使用useEffect (如componentDidMount )只需一次就可以提取数据并设置状态？
当我将控制台写入useEffect时，"React缺少一个依赖项：‘data’“。警告并返回空列表。
顺便说一下，我删除了严格模式。
import R
浏览 3提问于2020-12-06得票数 0
回答已采纳
3回答
我有一个组件名为"Home“，其中有一个useEffect，它有一个console.log(”家庭组件挂载“)。我只是用了一个普通的useEffect钩子。但是，当我最初呈现页面时，我得到控制台日志2次，而不是在组件的初始挂载中显示它。有人能告诉我密码是怎么回事吗。守则如下：
import React, { useEffect } from 'react';
const Home = () => {
useEffect(()=>{
console.log("Home component mounted")
})
ret
浏览 7提问于2022-04-17得票数 2
回答已采纳
2回答
我需要检查我的条件反应挂钩时，启动或更改的值我尝试了这段代码，但我不能运行没有Btn
import React,{useEffect} from 'react';
import { StyleSheet, View } from 'react-native';
import * as Permissions from 'expo-permissions';
import { Notifications} from 'expo';
export default function NotificationsTest() {
con
浏览 15提问于2020-05-26得票数 0
我正在处理一个反应无限大的滚动组件，它工作得很好，而且非常完美，只有一个小问题是，对于第1页，它发出了API请求的两倍，这是我不想要的，对于其他页面(除2,3,4 )，它只提出一次请求。
我尝试了一切，但我无法修改代码，以便对于第1页，它只发出一次请求。
我怎样才能只提出一次第一页的要求？这是工作代码。
import React, { useState, useEffect } from "react";
import axios from "axios";
function Lists() {
const [posts, setPosts] = useS
浏览 1提问于2020-05-23得票数 1
回答已采纳
我正试图为我的useEffect创建一个清理函数，并更新cancelRequest函数中的代码所使用的变量cancelRequest。
let cancelRequest = false;
useEffect(() => {
if (!url) {
dispatch({ type: "IDLE" });
return;
}
getAllTweets();
return function cleanup() {
cancelRequest = true;
};
}, [state.
浏览 4提问于2022-06-06得票数 0
回答已采纳
App.js： import React, { Fragment } from "react";
import Header from "./components/Header";
import PostList from "./components/PostList";
import Post from "./components/Post";
import TagList from "./components/TagList";
import { BrowserRouter as Router, Switch
浏览 122提问于2020-12-11得票数 0
回答已采纳
3回答
我想知道，在使用useEffect获取数据之后，函数是如何运行的，而函数在数据被拉出后是如何处理数据的呢？ import React, { useState, useEffect } from 'react';
const Result = (props) => {
const [ playerName, setPlayerName ] = useState('');
const [ playerChoice, setPlayerChoice ] = useState(null);
const [ computerChoice,
浏览 45提问于2019-09-08得票数 1
我正在尝试用react钩子构建一个redux进程，下面的代码是我想要用一个getUsers(redux action)调用来模拟一个ComponentDidMount函数，这是一个获取数据的http请求。
第一个版本是这样的
const { state, actions } = useContext(StoreContext);
const { getUsers } = actions;
useEffect(() => {
getUsers(); // React Hook useEffect has a missing dependency: 'getUsers'
浏览 2提问于2019-12-08得票数 5
3回答
我有一个问题，我有一个函数，它必须在userEffect中执行一次，但是userEffect总是执行两次，我不知道为什么，我在这里查找了很多解决方案，它们都给出了相同的答案--使用useEffect参数，所以这个[]或者使用useCallback，但是所有的方法都没有工作，我甚至用一些非常简单的方法测试了它，我会把代码放在这里。
import React from 'react';
function App() {
React.useEffect(() => {
test();
},[])
function test (){
console.
浏览 10提问于2022-05-22得票数 0
1回答
我订阅了useEffect钩子中的消息传递服务的一些更新。通过react文档和资源，我无法用代码找到一些观察的答案。下面是我的代码片段：
import React, { useState, useEffect } from "react";
import { messageService } from "../_services";
function App() {
const [count, setCount] = useState(0);
useEffect(() => {
const subscription = messageSe
浏览 0提问于2020-07-08得票数 0
回答已采纳
我的组件通过调用一个钩子文件来获取数据，该钩子文件包含通过API请求的逻辑。默认情况下，它将在没有任何额外参数的情况下调用API。在GUI中，我还显示了一个输入，用户可以在其中输入文本。每次他写一封信，我都想重新获取数据。但是我真的不确定如何使用react和钩子来做到这一点。 我声明了"useEffect“。我看到输入的内容发生了变化。但是还有什么呢？我不能从那里调用钩子函数，因为我得到了这个错误： “无法在回调中调用React Hook "useFetch”。必须在React函数组件或自定义React Hook函数react- Hooks /钩子规则中调用react hoo
浏览 37提问于2020-01-30得票数 0
我目前正在研究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
实时音视频活动推荐
腾讯云开发者
