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.js
  Line 48:4:  React Hook useEffect has a missing dependency: 'renderChart'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

Search 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;