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

Question

通过大量迭代修改数组时出错。

 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)

  });

Answer 1

很难说没有代码组件，但我怀疑问题在于你在函数组件体内立即调用你的状态 setter，这迫使 React 重新调用你的函数再次，使用相同的道具，最终再次调用状态 setter，这会触发 React 再次调用您的函数....等等。

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]);

Answer 2

解决方法是创建一个临时变量并使用它存储循环的结果，当循环完成时，您可以将 setGraphData 设置为最终结果

    const 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.push(result) //storing results to temporary array
  });
   setGraphData(tempVar); //setting the final result of the loop to graphData

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

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

arrays

jsx

reactjs