while循环中的setState导致“重新渲染太多。React限制了渲染次数以防止无限循环”

Question

我正在尝试计算countDiff并将对象添加到记录数组countDiff次。例如，如果countDiff值为2，那么我想添加两个相同的对象，并增加tempRecordId。

但是出现“重新渲染太多。React限制了渲染数量以防止无限循环”错误。您知道循环中使用setState的任何方式还是弄清楚此逻辑的方式？

      const countDiff = homeRecordCount - awayRecordCount;

      let i = 0;
      let insertTeamId = countDiff > 0 ? awayTeamId : homeTeamId;

      if (countDiff != 0)
      {
        while(countDiff != i)
        {
          setTempRecordId(tempRecordId + 1);
          addRowToRecord({scoreMemberName:null, scoreMemberId: null, scoreTeamId: insertTeamId, assistMemberName: null, assistMemberId: null, matchId: matchId, codeId: 7, id: 0, tempRecordId: tempRecordId })
      i++;
    }
}

Answer 1

您不应在Hook组件中使用条件或循环。 https://reactjs.org/docs/hooks-rules.html

在这种情况下，您可以一次添加所有记录。

Answer 2

处理这种情况的最佳方法是在首先设置状态之前构造所需的最终对象，即将状态设置为while循环之后。

Answer 3

这意味着一旦调用setState，它将呈现您的页面。您的逻辑设置为永无止境的循环。我猜一直（countDiff！= i => true）都在while循环内部。请以一些结束条件设置您的逻辑。