React类/函数组件中for循环渲染表格触发函数无限调用问题

你遇到的异常不是React组件触发函数无限调用，本质是for循环的更新逻辑写漏了，直接造成死循环。

• 标准for循环由三部分组成：循环变量初始化、循环边界判断、循环变量更新。你写的循环更新语句i + 1、j + 1只做了加法运算，没有把运算结果赋值回循环变量本身，导致i、j的值永远停留在初始的0，循环边界条件i < 3、j < 5永远成立，循环完全走不出去。
• 这个问题和React运行机制、组件类型没有关系，哪怕脱离React单独跑这段原生JS代码，也会触发同样的死循环报错。

给循环的更新表达式补上赋值操作就行，两种等价写法都可以用：

• 完整写法：i = i + 1 / j = j + 1
• 简化自增写法：i++ / j++

修正后的可运行代码：

class ReserveView extends Component {
  createTable() {
    const table = []

    for (let i = 0; i < 3; i++) {
      const children = []
      for (let j = 0; j < 5; j++) {
        children.push(<td>{`Column ${j + 1}`}</td>)
      }
      table.push(<tr>{children}</tr>)
    }
    return table
  }

  render() {
    return (
      <div>
        <table>
          {this.createTable()}
        </table>
      </div>
    )
  }
}

避坑提醒：JavaScript里的a + 1是无副作用的纯计算表达式，不会改动变量a的自身值，写循环时很容易漏写赋值步骤，和其他部分语言的自增语法习惯差异明显。

内容的提问来源于stack exchange，提问作者Alexandre Houmeau