Javascript 超过最大更新深度。React限制嵌套更新的数量以防止无限循环

我有一个从redux获得的对象数组，这些对象中有数据数组。我正在尝试修改数组并再次将数据存储在redux中。我尝试过useCallback（）和useEffect（）之类的方法，但无论我尝试了什么，都会得到一个错误：超过了最大更新深度。当组件在componentWillUpdate或componentDidUpdate内重复调用setState时，可能会发生这种情况。React限制嵌套更新的数量以防止无限循环。 或 “重新渲染的次数过多。React限制渲染次数以防止无限循环。” 我意识到发生这种情况的原因是因为我正在从redux调用数据，使用从urql订阅获得的数据修改数据，然后将其重新发送到redux。我不知道如何才能解决这个问题。如果有人遇到了这个问题并找到了解决方案，我会非常高兴地得到答案。 链接到项目。

import React，{useffect}来自“React”；
从“recharts”导入{LineChart，Line，XAxis，YAxis，CartesianGrid，Tooltip，Legend}；
从'react redux'导入{useDispatch，useSelector}；
从“../components/Card”导入卡片；
//从“../Features/DataCon/reducer”导入{actions}
从“../Features/MultipleMetrics/sliceReducer”导入{actions}；
导出默认函数MultiChart（）{
const multiData=useSelector（state=>state.multipleData.multipleData）；
const dispatch=usedpatch（）；
const injValveData=useSelector（state=>state.injValve.injValveData）；
const oilTempData=useSelector（state=>state.oilTemp.oilTempData）；
const flareTempData=useSelector（state=>state.flareTemp.flareTempData）；
const waterTempData=useSelector（state=>state.waterTemp.waterTempData）；
const casingPressureData=useSelector（state=>state.casingPressure.casingPressureData）；
常数tubingPressureData=useSelector（状态=>state.tubingPressure.tubingPressureData）；
//constdisplaydata=useSelector（state=>state.chartData.chartData）；
/////////////////////这是导致抛出错误的代码块//////////////
让chartData=JSON.parse（JSON.stringify（multiData））；//获取redux数据集
useffect（（）=>{
如果（chartData.length>0）{
for（设i=0；i{
如果（i.metric==injValveData.metric）{
返回；
}else if（i.metric==oilTempData.metric）{
返回；
}else if（i.metric==flareTempData.metric）{
返回；
}else if（i.metric==waterTempData.metric）{
返回；
}else if（i.metric==casingPressureData.metric）{
返回；
}否则如果（i.metric==管道压力数据metric）{
返回；
}
})}
{multiData.map（i=>{
返回(
);
})}
);
}

为什么chartdata处于useEffect？请记住，每次渲染的依赖项发生变化时，都会调用useEffect。从代码的外观来看，您正在修改useEffect中的multiData，而multiData也是效果的一个依赖项，因此会导致无限的渲染循环。

import React, { useEffect } from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';
import { useDispatch, useSelector } from 'react-redux';
import Card from '../components/Card';
// import { actions } from '../Features/DataCon/reducer'
import { actions } from '../Features/MultipleMetrics/sliceReducer';

export default function MultiChart() {
  const multiData = useSelector(state => state.multipleData.multipleData);
  const dispatch = useDispatch();
  const injValveData = useSelector(state => state.injValve.injValveData);
  const oilTempData = useSelector(state => state.oilTemp.oilTempData);
  const flareTempData = useSelector(state => state.flareTemp.flareTempData);
  const waterTempData = useSelector(state => state.waterTemp.waterTempData);
  const casingPressureData = useSelector(state => state.casingPressure.casingPressureData);
  const tubingPressureData = useSelector(state => state.tubingPressure.tubingPressureData);
  // const displayData = useSelector(state => state.chartData.chartData);

///////////////////// this is the block of code that is causing the error to be thrown //////////////

let chartData = JSON.parse(JSON.stringify(multiData)); // getting the redux data set 
  useEffect(() => {
    if (chartData.length > 0) {
      for (let i = 0; i < chartData.length; i++) {
        if (chartData[i].metric === 'injValveOpen') {
          chartData[i].measurements.shift();
          chartData[i].measurements.push(injValveData);
          dispatch(actions.multipleData(chartData));
// where the data is modified and the dispatch is sent out
        } else if (chartData[i].metric === 'flareTemp') {
          chartData[i].measurements.shift();
          chartData[i].measurements.push(flareTempData);
          dispatch(actions.multipleData(chartData));
        } else if (chartData[i].metric === 'waterTemp') {
          chartData[i].measurements.shift();
          chartData[i].measurements.push(waterTempData);
          dispatch(actions.multipleData(chartData));
        } else if (chartData[i].metric === 'oilTemp') {
          chartData[i].measurements.shift();
          chartData[i].measurements.push(oilTempData);
          dispatch(actions.multipleData(chartData));
        } else if (chartData[i].metric === 'casingPressure') {
          chartData[i].measurements.shift();
          chartData[i].measurements.push(casingPressureData);
          dispatch(actions.multipleData(chartData));
        } else if (chartData[i].metric === 'tubingPressure') {
          chartData[i].measurements.shift();
          chartData[i].measurements.push(tubingPressureData);
          dispatch(actions.multipleData(chartData));
        }
      }
    }
  }, [multiData]);

/////////// this is the block of code that is causing the error to be thrown ////////////


  const names = {
    injValveOpen: 'INJ Valve Open',
    oilTemp: 'Oil Temp',
    tubingPressure: 'Tubing Pressure',
    flareTemp: 'Flare Temp',
    casingPressure: 'Casing Pressure',
    waterTemp: 'Water Temp',
    default: 'metric',
  };

  const colors = {
    injValveOpen: '#1BD82A',
    oilTemp: '#000000',
    tubingPressure: '#FF0000',
    flareTemp: '#FFB201',
    casingPressure: '#830BEE',
    waterTemp: '#000CFF',
    default: '#00FFE0',
  };

  return (
    <>
      {multiData.map(i => {
        if (i.metric === injValveData.metric) {
          return <Card metric={names[i.metric]} data={`${injValveData.value}${injValveData.unit}`} />;
        } else if (i.metric === oilTempData.metric) {
          return <Card metric={names[i.metric]} data={`${oilTempData.value} ${oilTempData.unit}`} />;
        } else if (i.metric === flareTempData.metric) {
          return <Card metric={names[i.metric]} data={`${flareTempData.value} ${flareTempData.unit}`} />;
        } else if (i.metric === waterTempData.metric) {
          return <Card metric={names[i.metric]} data={`${waterTempData.value} ${waterTempData.unit}`} />;
        } else if (i.metric === casingPressureData.metric) {
          return <Card metric={names[i.metric]} data={`${casingPressureData.value} ${casingPressureData.unit}`} />;
        } else if (i.metric === tubingPressureData.metric) {
          return <Card metric={names[i.metric]} data={`${tubingPressureData.value} ${tubingPressureData.unit}`} />;
        }
      })}
      <LineChart width={1000} height={600}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="at" type="category" allowDuplicatedCategory={false} />
        <YAxis dataKey="value" />
        <Tooltip />
        <Legend layout="vertical" verticalAlign="middle" align="right" />
        {multiData.map(i => {
          return (
            <Line
              dataKey="value"
              data={i.measurements}
              name={names[i.metric]}
              key={i.metric}
              dot={false}
              stroke={colors[i.metric]}
            />
          );
        })}
      </LineChart>
    </>
  );
}