react-hooks / exhaustive-deps用于react chartjs 2的图表数据

问题描述

我正在使用react chartjs2显示折线图。并且图表的数据在useEffect中正在更新。该图显示数据。事情是可行的。但是我得到了这个钩排气部规则警告：

第51行：React Hook useEffect缺少依赖项：'chartData'。要么包含它，要么删除依赖项数组react-hooks / exhaustive-deps

但是，如果我添加状态chartData，则页面冻结，因为我认为它会陷入无限循环。数据可能正在继续调用。代码是：

const [chartData,setChartData] = useState({
    labels: [],datasets:[]
  });

  useEffect(()=>{
    let oNewChartData = {...chartData};
        oNewChartData.labels = [1,2,3,4,5,6,7];
        oNewChartData.datasets = [{
                       label: 'Week',borderColor: 'green',fill: false,data: {x:[1,7],y:[0,1,5]}
                   }
                 ]
        setChartData(oNewChartData);
    }
  },[props]);

解决方法

是的，这是因为useEffect将在更新chartData时触发，并且您在useEffect中更新chartData，这将导致无限循环。我的猜测是，您有一个ESLint告诉您将此值包含在useEffect中。

ESLint不了解react中的无限循环

react-chartjs-2 react-redux