Error: Too many re-renders , when modifying an array-CodePudding

Getting error when modifying array through large number of iterations.

 data.logData1[0].data.map((values, index) => {
    var result = {};
    data.logData1[0].mnemonicList
      .split(",")
      .forEach((key, i) => (result[key] = values.split(",").map(Number)[i]));

    setGraphData([...graphData, result]); //Modifying Array (here comes trouble)

  });

CodePudding user response：

Its difficult to say without code component, but I suspect that the problem lies in the fact that you are calling your state setter immediately inside the function component body, which forces React to re-invoke your function again, with the same props, which ends up calling the state setter again, which triggers React to call your function again.... and so on.

const resultData =  data.logData1[0].data.map((values, index) => {
    var result = {};
    data.logData1[0].mnemonicList
      .split(",")
      .forEach((key, i) => (result[key] = values.split(",").map(Number)[i]));

   return result

  });

// somewhere in your useEffect or in function

 setGraphData([...graphData, resultData]);

CodePudding user response：

A work around can be you create a temporary variable and use it store the result from the loop and when are done looping, you can setGraphData to the final result

    let tempVar = []
    data.logData1[0].data.map((values, index) => {
    var result = {};
    data.logData1[0].mnemonicList
      .split(",")
      .forEach((key, i) => (result[key] = values.split(",").map(Number)[i]));
      tempVar = tempVar.push(result) //storing results to temporary array
  });
   setGraphData(tempVar); //setting the final result of the loop to graphData