react-hooks/exhaustive-deps警告

import React, {useRef, useEffect} from 'react';
import {useTheme} from '@material-ui/core/styles';
//import echarts from 'echarts/lib/echarts';
import * as echarts from 'echarts';
//let exfn = ()=><div>页面</div>;export default function Page() {const theme = useTheme();const chartRef = useRef();//console.log(theme);const config = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [120, 200, 150, 80, 70, 110, 130],type: 'bar',showBackground: true,backgroundStyle: {color: 'rgba(180, 180, 180, 0.2)'}}],};let chartInstance;const renderChart = async () => {const renderedInstance = echarts.getInstanceByDom(chartRef.current);if (renderedInstance) {chartInstance = renderedInstance;} else {chartInstance = echarts.init(chartRef.current);}chartInstance.setOption(config);};useEffect(() => {renderChart();//console.log('render');//console.log(chartRef.current);},[]);return (<div style={{backgroundColor:theme.palette.background,flexGrow:1,color:theme.palette.text.primary}}>text<div style={{width: 600, height: 400, }}id="z" ref={chartRef}></div></div>);};//export default exfn;

在使用useEffect钩子时，出现如下警告，虽然这里不影响呈现，但容易形成bug。

Compiled with warnings.src\Components\Page.jsLine 48:4:  React Hook useEffect has a missing dependency: 'renderChart'. Either include it or remove the dependency array  react-hooks/exhaustive-depsSearch for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

官网的解决方案是：推荐的修复方案是把那个函数移动到你的 effect 内部。

参考：

https://react.docschina.org/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies

修改后的代码：

import React, {useRef, useEffect} from 'react';
import {useTheme} from '@material-ui/core/styles';
//import echarts from 'echarts/lib/echarts';
import * as echarts from 'echarts';
//let exfn = ()=><div>页面</div>;export default function Page() {const theme = useTheme();const chartRef = useRef();//console.log(theme);useEffect(() => {const config = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [120, 200, 150, 80, 70, 110, 130],type: 'bar',showBackground: true,backgroundStyle: {color: 'rgba(180, 180, 180, 0.2)'}}],};let chartInstance;const renderChart = async () => {const renderedInstance = echarts.getInstanceByDom(chartRef.current);if (renderedInstance) {chartInstance = renderedInstance;} else {chartInstance = echarts.init(chartRef.current);}chartInstance.setOption(config);};renderChart();//console.log('render');//console.log(chartRef.current);},[]);return (<div style={{backgroundColor:theme.palette.background,flexGrow:1,color:theme.palette.text.primary}}>text<div style={{width: 600, height: 400, }}id="z" ref={chartRef}></div></div>);};//export default exfn;

react-hooks/exhaustive-deps警告相关推荐

使用React Hooks 时要避免的5个错误！
作者:Shadeed 译者:前端小智来源:dmitripavlutin 点赞再看,微信搜索**[大迁世界],B站关注[前端小智]**这个没有大厂背景,但有着一股向上积极心态人.本文 GitHub h ...
React Hooks 完全使用指南
大家好,我是若川.最近组织了源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步.同时极力推荐订阅我写的<学习源码整体架构系列> ...
如何使用 React 和 React Hooks 创建一个天气应用
大家好,我是若川(点这里加我微信 ruochuan12,长期交流学习).今天推荐一个练手的React项目,创建天气应用,相信很快能看完.昨天发送书掉粉18人,是我没想到的,送书一般是出版社按阅读量赞助 ...
react hooks使用_我如何使用React Hooks在约100行代码中构建异步表单验证库
react hooks使用 by Austin Malerba 奥斯汀·马勒巴(Austin Malerba) 我如何使用React Hooks在约100行代码中构建异步表单验证库 (How I bu ...
React16：Hooks总览，拥抱函数式 (这大概是最全的React Hooks吧)
React16.8中加入了Hooks,让React函数式组件再一次升华,那么到底什么是Hooks? 动机 React官网和2018年的React conf上都提到了动机这个东西,那么出现hooks的动 ...
React Hooks 分享
目录一,什么是Hooks 二,为什么要使用Hooks 三,React hooks 四, useState 使用及实现五,useEffect 使用及实现六,如何实现多个useState, useE ...
[React Hooks长文总结系列一]初出茅庐，状态与副作用
写在开头优惠券 https://www.fenfaw.net/ React Hooks在我的上一个项目中得到了充分的使用,对于这个项目来说,我们跳过传统的类组件直接过渡到函数组件,确实是一个不小的挑 ...
【React全家桶】React Hooks
React Hooks hooks介绍 useState(保存组件状态) useEffect() useCallback(记忆函数) useMemo() 记忆组件 useRef(保存引用值) useR ...
【React】React全家桶（五）React Hooks
文章目录 1 Hooks简介 1.1 什么是Hooks? 1.2 Hooks的优势 1.3 Hooks使用场景 1.4 Hooks使用注意事项 2 Hooks API 2.1 数据驱动更新型Hooks ...
都React V18了，还不会正确使用React Hooks吗，万字长文解析Hooks的常见问题
前言今天主要想说一下react hooks,react hooks是react v16.8 之后引入的API,现在react都已经到V18了,hooks怎么还能不会用呢? 首先hooks引入的目的是 ...

react-hooks/exhaustive-deps警告

react-hooks/exhaustive-deps警告相关推荐

最新文章

热门文章