React: ESLint如何知道何时可以省略useEffect依赖？
ESLint可以通过一些规则和插件来检查和提示在React中使用的useEffect依赖项是否被正确声明或省略。下面是一些常见的方法和建议来确保ESLint知道何时可以省略useEffect的依赖项：
- 使用ESLint的"react-hooks"插件：该插件为React提供了一些额外的规则，包括对useEffect依赖项的检查。在项目的ESLint配置文件中，确保已经安装了该插件，并将其添加到"plugins"部分。
- 启用"react-hooks/exhaustive-deps"规则：该规则可以帮助你确保在useEffect中声明了所有必要的依赖项。在ESLint配置文件的"rules"部分，将"react-hooks/exhaustive-deps"设置为"error"或"warn"，以启用该规则。
- 使用依赖项数组：在每个useEffect调用中，都要在第二个参数中指定依赖项数组。这个数组描述了useEffect应该监视的变量或状态。如果你确定某个useEffect不依赖于任何变量或状态的变化，可以将该依赖项数组留空，以示明确。
- 使用ESLint的禁用注释：如果某个特定的useEffect调用确实不需要任何依赖项，但ESLint仍然报告缺少依赖项的警告，你可以在该useEffect之前添加一个特殊的禁用注释来解决该问题。例如，在useEffect调用的上一行添加注释"eslint-disable-next-line react-hooks/exhaustive-deps"，以告诉ESLint跳过该警告。
对于React中useEffect依赖项的省略，具体的实践和判断依据可能会因项目和场景的不同而有所不同。因此，在编写代码时，建议仔细阅读ESLint和"react-hooks"插件的文档，并遵循最佳实践来确保正确地使用和省略useEffect依赖项。
相关·内容
React的useEffect钩子通常需要将每个外部值添加到依赖项数组中。据我所知，这是因为React保证setState永远不会改变，所以ESLint觉得没有必要在依赖项中要求它。但是ESLint是怎么知道的呢？有没有一种方法可以让我指定一个永远不变的东西，让ESLint拾取它，并允许我省略“伪依赖”？const [state, setState] = useState(fals
浏览 75提问于2021-05-05得票数 1
回答已采纳
React useEffect缺少一个依赖项：“调度”。要么包含它，要么删除依赖数组react/react。返回状态})；const history=useHistory() const dispatch=useDispatch ()；// const formik = useFormikContext()；useEffect
浏览 6提问于2021-10-19得票数 7
3回答
useEffect(()=>{ },[token, history])
也就是说，这里令牌不是useEffect的一部分，但我想将它添加为useEffect的依赖项。
浏览 2提问于2021-06-24得票数 4
回答已采纳
有人能给我解释一下吗：
我尝试使用没有依赖项的useEffect，而eslint不喜欢这样，他们建议添加一个跳过下一行，这似乎有点麻烦：
//
浏览 8提问于2019-09-25得票数 36
为此，我将useEffect '[]‘的第二个参数设为空列表。没有什么能阻止它工作，但是我从ESLint规则中得到了一个警告：React useEffect缺少一个依赖项：'changeCount‘。要么包含它，要么删除依赖数组Resive-挂钩/详尽-deps。如何删除此警告？const App = ({UserStore:{setCount, count}}) => {
const changeCount = () =>
浏览 6提问于2021-02-13得票数 4
回答已采纳
在我的useEffect代码中，我分派了一个从片中获取的操作。但是它会抛出错误"React Hook useEffect has missing dependencies“，因为在钩子内部我正在使用操作和分派const { actions } = useDataListSlice();useEffect(() => {}, []);
我可以向依赖数组添加操作和分派，但我
浏览 2提问于2021-06-15得票数 1
我试图在useEffect中运行一个函数，我的代码运行得很好，但我收到了来自eslint的警告。const { } = useNotification();
if (process.env.NODE_ENVconst { refetch } = useQuery('example');
refetch();
浏览 2提问于2021-10-02得票数 0
如果使用空数组作为依赖项，一切都会正常工作。我在列表组件上列出了我的最后一个数组。但是eslint仍然说我应该在依赖项中添加"clientsRef“和"updateClients”，但是这会导致无限循环。那我该怎么处理呢？闭上我的眼睛听这个警告？collection = 'clients';
const clientsRef = firestore.collection('clients').orderBy('createdAt', 'desc
浏览 1提问于2020-06-01得票数 2
回答已采纳
我试图在useEffect回调中使用异步函数。import throttle from 'lodash/throttle';
myRequestWrapped(name); // React Hook useEffect has a mis
浏览 3提问于2020-05-10得票数 2
回答已采纳
当我在CodeSanbox中使用React时，我可以使用props对象的单个属性作为useEffect钩子的依赖项：useEffect(()=>{
React缺少一个依赖项：“props”。要么包含它，要么删除依赖数组。但是，当任何道具发生变化时，“props”都会发生变化，因此首选的修复方法是在useE
浏览 2提问于2019-07-31得票数 2
我使用useEffect只在componentDidMount时使用一次。
requestPatientsApi(); } catc
浏览 0提问于2019-09-06得票数 0
21回答
/src/components/BusinessesList.js我一直无法找到阻止无限循环的解决方案。我确实找到了这个讨论，其中一个可能的解决方案是You can always /
浏览 16提问于2019-04-25得票数 719
回答已采纳
1回答
我试着运行一个程序，但是我收到了这样的警告消息:第75:8行: React缺少依赖项：'client‘和'loading’。要么包含它们，要么删除依赖数组react/react。listEmpty, setListEmpty] = useState(false);
useEffect
浏览 4提问于2022-02-23得票数 0
3回答
如何解决行31:6: React缺少依赖项：“fetchUserName”和“历史”。要么包含它们，要么删除依赖数组react/详尽的-deps？我解决不了。我正在使用Firebase进行身份验证。import React, { useEffect, useState } from "react";
import { useAuthState } from "react-firebase-hoo
浏览 10提问于2021-10-02得票数 0
2回答
我在这里的目标是在useEffect中调用操作。const ShowTodos = (props) =>{ props.fetchTodos()} }
export default connect(mapStateToProps,{fetchTodos})(ShowTodos) 它工作得很好，但我得到了警告 ReactHook useEffect</e
浏览 25提问于2019-04-30得票数 6
回答已采纳
3回答
为什么会产生无限循环？
、、、、
我正在尝试使用React钩子在数据上创建一个过滤器。我真的不明白为什么这段代码会在我调用setEnteredFilter时创建一个无限循环。const [enteredFilter, setEnteredFilter] = useState("");
fetch("userConf_user.json
浏览 28提问于2021-02-10得票数 0
回答已采纳
我创建了以下助手函数，因为React中的函数组件没有挂载和卸载事件。我不在乎人们怎么说，useEffect不是一个等价物。我这样做是因为当我使用useEffect作为挂载或卸载事件时，它会污染我的终端，发出毫无意义的警告，不要将某些内容包含在依赖项列表中。我知道我应该这么做..。useEffect(() => stopMusic, []);}
但是，我收到了一个警告，即stopMusic不包括在依赖项中。但我不希望它是依赖项，因
浏览 6提问于2021-09-17得票数 0
回答已采纳
嗨，我正面临着useEffect钩子在反应中的问题。下面的代码的工作原理是应该的，但是es建议我需要从useEffect提供依赖项数组中的依赖项。使用// eslint-disable-next-line react-hooks/exhaustive-deps的工作代码 }, []);
浏览 5提问于2020-06-20得票数 3
回答已采纳
</svg> 但是我得到了下面的eslint错误： React Hook useEffect contains a call to 'setViewBox'.To fix this, pass [viewBox] as a second argument to the useEffect Hook.eslint(react-hooks/exhaustive-deps我可以禁用eslint规则： &#x
浏览 27提问于2020-09-19得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
