使用ES6 Set作为useEffect()的依赖项。更改时未调用的效果
使用ES6 Set作为useEffect()的依赖项是为了解决在React函数组件中使用useEffect()钩子时可能出现的问题。当我们在useEffect()中传入一个依赖项数组时，React会根据这个数组中的值来判断是否需要重新运行effect函数。如果依赖项数组中的值发生变化，effect函数将会被重新运行；如果依赖项数组中的值没有发生变化，effect函数将不会被重新运行。
然而，当我们需要监听一个复杂数据结构的变化时，例如一个对象或者一个数组，直接将它作为依赖项可能会导致不准确的判断。这是因为JavaScript中的对象和数组是引用类型，即使它们的值发生了变化，但它们的引用地址并没有发生变化，React无法准确地判断它们是否发生了变化。
为了解决这个问题，我们可以使用ES6 Set来作为useEffect()的依赖项。Set是一种集合数据结构，它可以存储任意类型的唯一值。当我们将一个Set作为依赖项时，React会根据Set的内容来判断是否需要重新运行effect函数。只要Set中的值发生了变化，无论是添加、删除还是修改，effect函数都会被重新运行。
使用ES6 Set作为useEffect()的依赖项的优势是可以精确地监听复杂数据结构的变化，避免了因为引用地址不变而导致的判断错误。它适用于需要监听对象、数组等复杂数据结构的变化的场景。
在腾讯云的产品中，没有直接与ES6 Set相关的产品或服务。然而，腾讯云提供了丰富的云计算产品和服务，可以满足各种需求。您可以访问腾讯云官方网站（https://cloud.tencent.com/）了解更多关于腾讯云的产品和服务。
相关·内容
1回答
使用ES6 Set作为useEffect()的依赖项。更改时未调用的效果
javascript、reactjs、ecmascript-6、set、react-hooks
我想在我的React组件中使用ES6 Set，以及useState()和useEffect()。它在useState()上工作得很好，但useEffect()不会在Set依赖项更改时触发。下面是相关的代码。onChange()是备忘的。("Selected Set", selected)
useEffect(() =&g
浏览 9提问于2020-03-06得票数 1
回答已采纳
1回答
在使用钩子运行React 16应用程序时缺少依赖项警告
reactjs、react-hooks
下面是一个示例React 16 useEffect代码 const var3 = var1 + var2;我希望只有在var1更改时才调用上述效果，但在该效果中，我使用的是var2，因此我得到了缺少依赖项var2的警告。我不希望在var2更改时调用该效果。
我想在
浏览 4提问于2021-08-12得票数 0
1回答
使用useState钩子时使用get请求的无限循环
reactjs、loops、axios
新的反应和工作项目。我有一个组件，它使用来自后端的GET请求。除了我试图使用response data保存useState() hook之外，一切似乎都正常工作。每当我尝试使用数据进行setCompany时，我都会在检查控制台日志时得到一个无限循环。我似乎在其他帖子上找不到正确的答案。setCompany(company);
notify.error(err);
浏览 3提问于2021-09-24得票数 0
回答已采纳
2回答
当id传入react时再次调用api。
javascript、reactjs
我在useeffect中有这个回调函数，我想从父js将差异props.id传递给这个文件，所以我得到了不同的数据。问题是，当我从parent.js传递一个新的props.id时，const res = await axios.get("messages/get-all-messages/?receiver=" + props.id, config );没有被召回--当我传递一个新的props.id时，如何再次调用这个api？if (mountedRef.curren
浏览 7提问于2021-12-23得票数 1
1回答
useEffect无限期地调用状态，或者根本不调用
reactjs
我从智能合约中获取一些值，并调用API返回数据，这些数据运行良好。但是当我在getMyNFTs函数中设置状态时，它开始被无限期地调用。所以我把我的setState放在我的useEffect中，因为我知道当我在那个函数中调用not时会发生这种情况，我想停止多次调用它，但现在它根本没有被调用。我是不是用错了useEffect钩子？let [myNFTs, setMyNFTs] = useState([]);
let wallet = []
浏览 14提问于2021-11-03得票数 0
回答已采纳
2回答
我的useEffect到达了callstack，在文本更改之后，我不知道为什么？
javascript、reactjs、react-hooks
我的代码： console.log('fetchMovies api '); console.log('movies', Search); }, [page, text]);
console.log('use
浏览 16提问于2020-03-05得票数 0
2回答
为什么我的useEffect响应函数在页面加载时运行，尽管我给它提供了第二个值数组
javascript、reactjs、react-hooks、use-effect、use-state
为什么我的useEffect react函数在每次页面加载时都运行，尽管给它提供了一个带有query变量的第二个值数组？useEffect( () => {}, [query]);
它不应该只在query状态变量更改时运行吗？除了getRecipes函数之外，我没有其他任何使用useEffect函数的方法。import React, {useEffect, useState} from &#
浏览 0提问于2020-03-07得票数 0
回答已采纳
2回答
React道具加载速度不够快
reactjs、react-props、use-effect
当一个组件加载时，我试图通过useEffect来设置地图的纬度和经度。问题是在将道具添加到useEffect之前，组件会加载和渲染。useEffect(() => { // If I run this with a setTimeout it returnsI need to set the latitude and longitude below to the data passed in thro
浏览 16提问于2020-04-14得票数 1
1回答
"useEffect有缺失的依赖项“警告有时是错误的吗？
javascript、reactjs、react-hooks、use-effect
我已经使用钩子有一段时间了，我从来不完全理解为什么React会迫使我包含一些我不想在useEffect上使用的依赖项。--我理解useEffect钩子的“依赖性”的方式选项1(在依赖项数组中包括‘回调’)：当'id‘或’回调‘发生更改时，在依赖
浏览 4提问于2020-09-28得票数 4
回答已采纳
2回答
如何在重新渲染时更新API调用？
reactjs、state、react-hooks
我正在自学React Hooks，我想在用户在搜索框中键入内容时更新API调用。一种实况搜索。我知道这个事件只在页面加载时触发，但是我该如何解决这个问题呢？示例如下：https://codesandbox.io/s/6x1xp57zmk import React, {useState, useEffect} from 'react';
const json = awai
浏览 25提问于2019-04-22得票数 0
回答已采纳
2回答
ReactJS:如何只调用一次useEffect钩子来获取接口数据
reactjs、redux、react-hooks
通过使用React，我有以下使用useEffect()的功能组件import { connect } from 'react-reduxdefault connect( mapDispatchToProps如您所见，我有一个effect回调函数，它在我的MessagingCompone
浏览 1提问于2019-04-03得票数 20
回答已采纳
3回答
在React中，如何根据常量值变化调用函数
reactjs、typescript、react-table
其中一个是父组件，其余两个是子组件(EziSchedule & EziTransaction)，其中每个组件都通过调用API来获取自己的数据。我相信我需要使用state changed来调用EziTransaction组件中的getEziTransactionData来刷新数据，但是我不确定该怎么做。父组件 const [data, setData] = useState('schedule');
<e
浏览 0提问于2020-12-22得票数 1
2回答
理解React的详尽-deps林特规则
reactjs、react-hooks、eslint
我很难理解“详尽无遗”的林特规则。 onChange(value); <inputonChange={(event) => setValue(event.target.value)}> )它要求我将onChange添加到useEffect<em
浏览 2提问于2019-11-14得票数 140
回答已采纳
2回答
useState在中没有正常工作
javascript、react-native、axios、expo
我正在开发一个应用程序，并使用WordPress API显示帖子。我创建了两个按钮来浏览帖子列表。正如您所知道的，有一个参数"page=“可以在特定的页面上获得帖子，我已经初始化了一个状态来维护页面号。主要的问题是它没有正确地递增。屏幕后代码-import { View, FlatList, TouchableOpacityuseState([]);
const [p
浏览 3提问于2021-08-19得票数 0
回答已采纳
3回答
React :为什么useEffect需要一个详尽的依赖数组？
javascript、reactjs、typescript、react-hooks
使用的是搜索用户输入。它的值总是ID，所以我只有用户ID作为支柱。因此，在第一次加载以显示用户名值时，我需要在第一次挂载时获取它。编辑:以后更改时，我不想再次获取值，因为我已经从建议请求中获得了值。 userID?} />};
(我正在添加一个简单的方法来<
浏览 1提问于2020-08-02得票数 6
回答已采纳
2回答
在useEffect依赖项数组中添加数组会导致无限循环
reactjs、react-hooks
简单的待办事项应用程序，列出我的任务，并允许我提交新的任务。连接到我构建的REST API，因此可以使用对该API的调用来检索任务。我使用useEffect来获取所有任务，并将它们存储在一个任务数组中。它应该在每次数组更改时运行(当我添加新任务时，当我删除任务时，等等)，这样我就不需要刷新就能看到更改。useEffect代码： const [tasks, setTasks] = useStat
浏览 58提问于2020-12-26得票数 0
回答已采纳
2回答
是否绝对需要将useEffect中的所有变量作为依赖项列出？
reactjs、react-hooks、use-effect
在useEffect中使用的所有变量是否总是、绝对地、毫无例外地需要指定为依赖项？我的用例(为演示目的简化)涉及根据浏览器窗口的宽度执行不同的功能，但在浏览器窗口更改时不运行：constscrollToTopOfArticle = () => window.scrollTo(0, 200)
浏览 3提问于2019-10-30得票数 3
回答已采纳
1回答
我建立了一个小的语音识别应用程序，但似乎不知道如何让我的按钮关闭，一旦我点击它，它就会继续运行。
javascript、reactjs、button、onclick
我是新的反应，所以仍然把我的头放在一些事情上，所以任何帮助都是很棒的。当我把我的声音翻译成文字时，我正试着让我的按钮打开或关闭。我尝试在StackOverflow上使用其他示例，但是我不断地得到错误，所以我将它恢复到原来的状态。
浏览 1提问于2022-10-06得票数 0
1回答
not :使用未定义为参数的数据
reactjs、react-hooks
我有一个动态URL，需要使用useEffect钩子中的axios调用来获取。searchResult, setSearch] = useState([]) useEffectreturn ( <Data data={searchResult}/
浏览 3提问于2022-01-04得票数 1
回答已采纳
2回答
使用效果等待上一页的数据
javascript、reactjs、use-effect
根据我的要求，我希望等到数据到达并绑定到我的useEffect()方法中的常量。从主页发送加密的数据，解密如下： const DecryptedGroupID = atob(groupID.toString()); factoryID: DecryptedFactoryID }, []);
我想添加
浏览 1提问于2022-04-11得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
