错误：修改数组时重新渲染次数过多答案

【问题标题】：Error: Too many re-renders , when modifying an array错误：修改数组时重新渲染次数过多
【发布时间】：2022-01-02 19:25:04
【问题描述】：

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

 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)

  });

【问题讨论】：

您遇到的错误是什么？需要更多说明或工作代码 sn-p，因为我们不知道 setGraphData 在做什么。

标签： arrays reactjs jsx

【解决方案1】：

没有代码组件很难说，但我怀疑问题在于您立即在函数组件主体内调用状态设置器，这迫使 React 再次使用相同的道具重新调用您的函数，最终再次调用状态设置器，这会触发 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]);

【讨论】：

【解决方案2】：

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

    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

【讨论】：