react -hooks/exhaustive deps用于react chartjs 2的图表数据
react-hooks/exhaustive-deps是一个用于React应用的工具，用于检查和提醒在使用React的Hook功能时可能遗漏的依赖项。这个工具可以帮助开发者在编写代码时发现潜在的问题，从而提高代码质量和可靠性。
在React中，Hooks是一种函数式编程的方式，可以让开发者在函数组件中使用状态和其他React特性，而不需要使用类组件。然而，使用Hooks时，有时可能会出现遗漏依赖项的情况。
在使用react-chartjs-2这个图表库时，我们通常会使用useState和useEffect等Hooks来管理图表的数据和状态。使用useEffect时，我们需要传递一个依赖项数组，告诉React在依赖项发生变化时重新运行effect函数。如果我们不正确地设置依赖项数组，就可能导致无限循环或其他意外行为。
这就是react-hooks/exhaustive-deps工具的用途。它会分析代码中的依赖项，并给出警告或建议，以确保依赖项的正确设置。通过使用这个工具，我们可以在开发过程中及时发现可能存在的问题，并进行修复，从而提高应用的性能和稳定性。
推荐的腾讯云产品和产品介绍链接地址：
相关·内容
我正在使用react chartjs2来显示折线图。海图数据在useEffect中不断更新。该图表显示了数据。一切都很顺利。但我得到了这个钩子排气排气规则警告： 第51行: React钩子useEffect缺少依赖项：'chartData‘。包括它或删除依赖数组react-hooks/exhaustive deps 但是如果我添加了状态chartData，页面就会冻结，因为我认为它会进入无限循环。数据可能会持续调用。代码是： const [chartData, setChartData] = useState({
labels: [],
datasets:[]
}
浏览 16提问于2020-11-05得票数 0
我是否正确地说，不可能使用 eslint插件与tslint？
我尝试将它添加到我的tslint.json中：
"plugins": ["react-hooks"],
"rules: {
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn",
但是，我在控制台中看到了以下错误：
Could not find implementations for the following rules
浏览 0提问于2019-02-23得票数 2
回答已采纳
我知道我可以禁用该文件或禁用该行，但我现在想要全局地这样做，这样我就不必在每次想要使用useEffect作为componentDidMount()时都写入它。 我试过了： {
"plugins": [
// ...
"react-hooks"
],
"rules": {
// ...
"react-hooks/rules-of-hooks": "off"/0, // tried each
"react-hooks/exhaustive-deps"
浏览 369提问于2020-09-20得票数 4
尝试调用useEffect钩子内的redux操作创建器时出现以下警告- React Hook useEffect has a missing dependency: 'getPlanQuotes'. Either include it or remove the dependency array react-hooks/exhaustive-deps 这是useEffect钩子- const { getPlanQuotes } = props;
useEffect(() => {
getPlanQuotes();
}, []); 所以我试着用// eslint
浏览 47提问于2020-01-28得票数 1
回答已采纳
我总是使用来自的react代码库。
function App() {
const [text, setText] = useState('');
const dispatch = useDispatch();
const _someFunction = useCallback(async () => {
try {
dispatch(actionB(dataB))
} catch (error) {
//
}
}, [dispatch]); <- here 2
useEffect(() =&
浏览 0提问于2020-04-22得票数 1
回答已采纳
我有一个带有useEffect钩子的react组件，如下所示：
const LocationEditor: React.FC<SectionEditorProps> = (props) => {
const [section, setSection] = useState({...(props.section as Location)});
useEffect(() => {
props.onChange(section);
}, [section]);
当我运行这个项目时，我得到了这样的警告：
React Hook useEffect has a missin
浏览 2提问于2021-01-13得票数 5
2回答
我有一个问题，原因是ESLINT输出控制台中的一个错误。我想解决控制台中的问题。请检查这里的代码框
更新问题
The 'callbackFunction' function makes the dependencies of useEffect Hook (at line 33) change on every render. Move it inside the useEffect callback. Alternatively, wrap the definition of 'callbackFunction' in its own useCallback
浏览 20提问于2021-04-13得票数 13
回答已采纳
我的组件有三个属性。urlText是一个字符串，setSelectedText是从connect()和clearPage更新状态的redux操作，后者是清除状态的另一个redux操作。 我只想在urlText更改时更新状态。我想在卸载时清除状态。 I get this eslint warning `react-hooks/exhaustive-deps: React Hook useEffect has missing dependencies: setSelectedText`
warning `react-hooks/exhaustive-deps: React Hook use
浏览 17提问于2020-10-29得票数 1
回答已采纳
1回答
如何启用Gatsby中的react钩子/详尽-deps警告？我的问题是关于盖茨比项目，我在反应项目方面没有问题。
我知道eslint-plugin-react-hooks是installed.In --我的.eslintrc文件--我添加了这些更改，但无法工作。
在rules中我添加了"react-hooks/exhaustive-deps": "warn",
在plugins中我添加了"react-hooks",
浏览 4提问于2022-06-20得票数 -1
回答已采纳
const useCustomHook = (refs) => {
const { someRef } = refs;
useEffect(() => {
console.log(someRef.current);
}, []); // <= react-hooks/exhaustive-deps for someRef
};
const useAnotherHook = () => {
const anotherRef = useRef(null);
return { anotherRef };
};
co
浏览 14提问于2021-04-25得票数 0
1回答
我使用useEffect钩子来调用动作创建者props.getStoreItems。我得到了下面的重复错误
React Hook useEffect has a missing dependency: 'props'.
Either include it or remove the dependency array react-hooks/exhaustive-deps.
这是我的代码：
function GetStoreData(props) {
useEffect(() => {
const {storeType} = props;
let u
浏览 2提问于2020-07-26得票数 0
1回答
我有一个子组件，它通过一个事件向父组件发出一个操作：
子组件：
export default function ChildComponent(props) {
const classes = useStyles();
const [value, setValue] = React.useState([0, 5]);
const handleChange = (_, newValue) => {
setValue(newValue);
props.updateData(newValue)
};
return (
<div classNa
浏览 1提问于2020-11-14得票数 3
回答已采纳
我使用的是VSCode，当我将行'react-hooks/exhaustive-deps': 'warn'添加到我的.eslintrc.js中时，会在ESLint输出中得到以下内容：
Rules with suggestions must set the `meta.hasSuggestions` property to `true`. Occurred while linting
C:\Users\filepath.jsx:72 Rule: "react-hooks/exhaustive-deps"
这就破坏了所有其他的皮毛。我尝试在我的.es
浏览 4提问于2021-10-15得票数 37
回答已采纳
我试图使用Next.js为IPFS创建一个产品构建，当我试图运行yarn build时会遇到以下错误：
68:8 Warning: React Hook useEffect has a missing dependency: 'updateUI'. Either include it or remove the dependency array. react-hooks/exhaustive-deps
./components/ManualHeader.jsx
16:8 Warning: React Hook useEffect has a missing depend
浏览 5提问于2022-07-08得票数 0
npm启动后，我看到错误，当它出现时，网页是空白的：
[frontend] Line 21:6: React Hook useEffect has a missing dependency: 'register'. Either include it or remove the dependency array react-hooks/exhaustive-deps
[frontend]
[frontend] ./src/components/user/findProperty/FindProperty.js
[frontend] Line 47:6: Reac
浏览 6提问于2021-10-04得票数 0
2回答
码头代码放在下面。
FROM node:16.9.1-alpine as build
WORKDIR /app
# Copy required files/folders to docker directory
COPY package.json /app
COPY package-lock.json /app
COPY lerna.json /app
COPY yarn.lock /app
COPY babel.config.js /app
COPY shared /app/shared
COPY projects/tt-core /app/projects/tt-core
# Inst
浏览 12提问于2022-09-06得票数 2
下面是我的组件函数： function RosterRows(props){
const [rosterList,setRosterList]=useState({});
const getData=async ()=>{
let roster=new Roster();
let rosterData=await roster.get(props.rosterYear,props.rosterMonth);
setRosterList(rosterData);
}
useEffect(()=>{
浏览 105提问于2020-12-01得票数 1
回答已采纳
我在useEffect钩子中做一个fetch请求。这是它看起来的样子。 useEffect(() => {
// clear prev state
setUniqueValues([]);
setLoading(true);
// get unique values and set field values;
jwtAxios
.post(`${baseURL}/support/get_unique_values`, {
field: fieldName,
catalog_id:
浏览 15提问于2021-09-14得票数 0
回答已采纳
我通过useAxios钩子使用React API钩子来获取组件加载时的useEffect数据。代码如下(简化)：
const [formData, setFormData] = useState<FormData>();
const [{ , executeGet] = useAxios('', {
manual: true,
});
const getFormData = async () => {
let r = await executeGet({ url: `http://blahblahblah/`});
retur
浏览 19提问于2020-05-17得票数 0
回答已采纳
我有一个包含以下规则的.eslintrc文件：
"rules": {
"prettier/prettier": "error",
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "error",
"no-console": "warn"
},
我安装了：eslint-plugin-prettier，eslint-config-pr
浏览 10提问于2022-02-10得票数 3
嗨，我正面临着useEffect钩子在反应中的问题。下面的代码的工作原理是应该的，但是es建议我需要从useEffect提供依赖项数组中的依赖项。
使用// eslint-disable-next-line react-hooks/exhaustive-deps的工作代码
export default function UsersList() {
const [users, setUsers] = useState<User[]>([]);
const { setError } = useContext(errorContext);
const { isL
浏览 5提问于2020-06-20得票数 3
回答已采纳
CODE HIGHLIGHTED IN GITHUB useEffect(() => {
async function getTok() {
await Gettestimon();
alldoc.map(forget => console.log(forget.name));
setcondi(true);
// eslint-disable-next-line react-hooks/exhaustive-deps
}
getTok();
}, []); 嗨，我有一个查询，真的很抱歉，如果它是一个旧的或非常著名的一个，但每当我编译突
浏览 50提问于2020-12-06得票数 0
回答已采纳
如何修复此警告？ React Hook useEffect缺少依赖项：'loading‘。要么包含它，要么删除依赖数组react-hooks/exhaustive deps。 useEffect(() => {
if (!loading && data) {
dispatch(action.TODO(data));
}
}, [data, dispatch]);
浏览 32提问于2021-04-21得票数 0
回答已采纳
我在使用Reacts钩子时有这样的警告。
React useCallback缺少一个依赖项：“历史”。要么包含它，要么删除依赖项array.eslint(react-hooks/exhaustive-deps
import { useHistory } from "react-router-dom";
const MyFunctionalComponent = () => {
const history = useHistory();
....
const someFunction = useCallbac
浏览 1提问于2020-01-08得票数 3
我有一个useEffect钩子，它应该在组件出现时订阅地理位置更新，然后在组件消失时取消订阅。因此，我将[]作为效果依赖项传递，因为我只希望它在挂载/卸载上运行。
import { useWatchPosition } from "@ionic/react-hooks/geolocation"
import React, { useEffect } from "react"
function SiteMap() {
const { currentPosition, startWatch, clearWatch } = useWatchPosition()
浏览 1提问于2020-01-09得票数 2
回答已采纳
我在一个模块中定义了一个useCustomHook，我想将它包含在react-hooks/exhaustive-deps检查中。我尝试过将它添加到additionalHooks选项中，但是如果我使用一个合格的导入，这是行不通的。
import * as MyMod from 'my_module'
.
.
.
const value = MyMod.useCustomHook(() => depA + missingDep, [depA])
我尝试过对以这个钩子名称结尾的任何东西使用regex：
"react-hooks/exhaustive-deps
浏览 2提问于2021-02-18得票数 4
我正在使用react 16.8和eslint - .When -react- hooks 1.6.0插件，我有条件地使用钩子，我希望eslint会警告我。下面是我的配置：
"eslintConfig": {
"parser": "babel-eslint",
"plugins": [
"react-hooks"
],
"rules": {
"react-hooks/rules-of-hooks": "error"
浏览 0提问于2019-04-28得票数 15
我使用useEffect()钩子通过'useState‘调用更新某些状态：
useEffect(
() => {
const newProps = {}
departments.forEach(dept => {
const { code } = dept
const newCode = code.toLowerCase()
newProps[newCode + '_reviewer'] = ''
})
setFormValues({ ...formValues, .
浏览 2提问于2020-03-10得票数 2
回答已采纳
1回答
我有一个表，其中填充了来自对象数组的数据。
这些数据是通过websockets收集的。套接字侦听3个不同的事件，并根据事件对数组执行以下操作之一：
用户可以添加一个条目
以下是代码：
interface TableEntry {
address: string;
amount: string;
children?: React.ReactNode;
}
export const TableComponent: FC = () => {
const socket = useContext(SocketContext);
const [entriesArray, set
浏览 1提问于2022-09-26得票数 0
回答已采纳
我正在尝试部署一个react应用程序。代码/应用程序在我的本地端运行得很好。然而，当我尝试部署它时，我得到了这个错误：
React Hook useEffect has a missing dependency: 'endGame'. Either include it or remove the dependency array react-hooks/exhaustive-deps
以下是与错误相关的代码：
useEffect(() => {
if (isTimeRunning && timeRemaining > 0) {
浏览 3提问于2020-12-13得票数 0
我得到了这个错误，我真的不能解决它： src/api/ConnectApi.js
Line 25:8: React Hook useEffect has missing dependencies: 'apiurl', 'dataState', and 'fetch'. Either include them or remove the dependency array. You can also do a functional update 'setDataState(d => ...)' if you only n
浏览 52提问于2021-08-04得票数 0
回答已采纳
我收到了这些小错误
./components/create-nft/InstagramSelector.js
39:15 Warning: Effect callbacks are synchronous to prevent race conditions. Put the async function inside:
useEffect(() => {
async function fetchData() {
// You can await here
const response = await MyAPI.getData(someId);
// .
浏览 2提问于2022-05-06得票数 1
在react 17中不一定使用
import React from 'react';
但是如果我没有它，所以eslint给了我错误
'React' must be in scope when using JSX react/react-in-jsx-scope
你知道如何修改.eslintrc.js吗？
module.exports = {
parser: "babel-eslint",
env: {
browser: true,
node: true,
es6: true,
jest: true,
}
浏览 1提问于2020-11-02得票数 20
回答已采纳
1回答
我有一个名为useInitial的钩子，定义为
function useInitial(value) {
const ref = useRef();
// Store current value in ref
useEffect(() => {
ref.current = value;
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
// Return previous value (happens before update in useEffect above)
浏览 19提问于2020-02-20得票数 1
1回答
React缺少一个依赖项：
、、、、
我正在构建一个带有react的get应用程序，我收到了这样的警告：
src\Containers\App.js
Line 30:6: React Hook useEffect has a missing dependency: 'API_KEY'. Either include it or remove the dependency array react-hooks/exhaustive-deps
Line 36:6: React Hook useEffect has a missing dependency: 'API_KEY'. Either
浏览 4提问于2021-08-12得票数 1
回答已采纳
我正在使用react-RouterV5.1，并试图在导航到不同的页面时清除会话变量。如果我单击页面上的一个链接，则会触发清理回调，但是，如果我使用浏览器的“后退”按钮，则路由会更改，但不会触发清理回调。
我真的不希望连接到react-router的位置/路由/等，因为这将是一个非常简单的方法来完成我正在尝试做的事情，而我显然不明白useEffect是怎么回事，所以更好地处理它将是一件很棒的事情。
谢谢!
const LinkProvider: React.FC = () => {
const location = useLocation
useEffect(() => {
浏览 37提问于2019-11-22得票数 1
回答已采纳
我需要将一些道具传递给第三方绘图库，但我只需要传递道具的初始值。我制作了一个包装器组件，它捕获初始道具的状态，然后将它们传递给第三方组件。
这是可行的，但是由于没有使用setZoom和setCenter，所以它看起来像是一种反模式：
function Wrapper({ center, zoom }) {
const [initialZoom, setInitialZoom] = useState(zoom);
const [initialCenter, setInitialCenter] = useState(center);
return <ThirdParty zoo
浏览 7提问于2022-02-25得票数 3
回答已采纳
我使用以下钩子来获取元素的宽度和高度：
import { useCallback, useLayoutEffect, useState } from "react";
interface Size {
width: number;
height: number;
}
function useElementSize<T extends HTMLElement = HTMLDivElement>(): [
(node: T | null) => void,
Size,
] {
function debounce(func: Function
浏览 1提问于2022-05-17得票数 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
回答已采纳
6回答
在我的代码中添加// eslint-disable-next-line react-hooks/exhaustive-deps后，我将得到下面的eslint错误。
8:14没有找到规则“react钩子/详尽-deps”的错误定义。
我参考了 post来解决这个问题，但是上面提到的解决方案在我的情况下不起作用。有什么线索可以阻止这个错误吗？
PS --我用的是。
浏览 9提问于2020-01-06得票数 51
回答已采纳
21回答
使用Reactive16.8.6(在以前的16.8.3版本中很好)，当我试图阻止获取请求上的无限循环时，我会得到这个错误：
./src/components/BusinessesList.js
Line 51: React Hook useEffect has a missing dependency: 'fetchBusinesses'.
Either include it or remove the dependency array react-hooks/exhaustive-deps
我一直无法找到阻止无限循环的解决方案。我想远离使用useReducer()。我确实
浏览 16提问于2019-04-25得票数 719
回答已采纳
我的CI/CD是: git > cicleci > heroku 我使用circleci的建议配置(附在下面) 我在circleci中有适当的环境变量。 第一部分运行良好，但是，当我部署到heroku时，我可以看到来自devs依赖项的警告，例如： ./src/hooks/myHook.js Line 11: React Hook useEffect has a missing dependency: 'x'. Either include it or remove the dependency array react-hooks/exhaustive-de
浏览 20提问于2019-07-02得票数 0
我想在我的.eslintrc.json文件中启用对“默认”typescript命名约定的警告。您如何做到这一点？
//package.json
//...
"@typescript-eslint/eslint-plugin": "^4.25.0",
"@typescript-eslint/parser": "^4.25.0",
"easy-peasy": "^5.0.3",
"eslint-plugin-react": "^7.23.2
浏览 30提问于2021-05-28得票数 0
回答已采纳
我认为我不理解React钩子的一些基本的东西，或者甚至只是一般的React。我从后端设置值。 const [values, setValues] = useState({
rentAmount: props.values.zestimates.rent_zestimate.toLocaleString('en-US'),
monthlyPayment: props.values.zestimates.rent_zestimate.toLocaleString('en-US'),
vacancyAmount: (props.v
浏览 127提问于2020-06-27得票数 0
回答已采纳
1回答
这是我的组成部分：
const FooComponent = () => {
const initFoo = {
attrOne: '',
attrTwo: '',
attrThree: '',
};
const fooContext = useContext(FooContext);
const { addFoo, hasFoo, currentFoo } = fooContext;
const [foo, setFoo] = useState(ini
浏览 3提问于2021-05-24得票数 0
回答已采纳
我有一个useEffect，我只想在React组件中第一次执行它。我在useEffect中使用的是useEffect，如果我将数组依赖项保持为空，就会得到以下警告：
React Hook useEffect has a missing dependency: 'location.pathname'. Either include it or remove the dependency array.eslintreact-hooks/exhaustive-deps
如果我包含依赖项，则每次用户导航时都会执行useEffect。
我看到很多人说警告只是一个潜在的问题，但是如果你知道
浏览 7提问于2022-03-03得票数 1
回答已采纳
4回答
我正在做一个定制的钩子，当某些状态发生变化时，这个钩子上会有一个嘟嘟。
您应该能够传递数组中的任何状态。
import { useState, useEffect } from 'react'
const useFlatListUpdate = (dependencies = []) => {
const [toggle, setToggle] = useState(false)
useEffect(() => {
setToggle(t => !t)
}, [...dependencies])
retur
浏览 4提问于2019-10-02得票数 20
我有个问题是关于弹射-插件-反应-挂钩。
我希望减少执行API调用并将结果存储到状态的样板代码，因此我创建了一个自定义钩子：
export const loading = Symbol('Api Loading');
export const responseError = Symbol('Api Error');
export function useApi<T>(
apiCall: () => CancelablePromise<T>,
deps: DependencyList
): T | (typeof l
浏览 7提问于2020-02-06得票数 6
回答已采纳
我想让data!.id
错误：
警告禁止非空断言@typescript-eslint/no-null断言
当前配置：
module.exports = {
parser: '@typescript-eslint/parser',
extends: [
'eslint:recommended',
'plugin:jsx-a11y/recommended',
'plugin:@typescript-eslint/eslint-recommended',
'plugin:@typescr
浏览 2提问于2020-02-20得票数 32
回答已采纳
1回答
我想限制连接到WS并经常获取数据的渲染组件，这会导致它经常重新渲染。我的解决方案是useMemo钩子，但是我不确定useMemo是不是为这种事情而设计的。可以肯定的是，每次更新data都会导致重新渲染，因为这就是useState的工作方式，而我必须更新这个data状态。您是否有一些建议或想法，如何限制<DataVisualizator />组件的重新渲染？ useInterval hook import { useEffect, useRef } from "react";
export const useInterval = (callback: () =&g
浏览 20提问于2021-10-08得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
