将参数传递给函数时出错

Question

我正在尝试使用我的参数向函数 onGridRowsUpdated 发送请求，但它向我抛出了错误

Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

我想知道是什么问题，因为我正确调用了参数。

  onGridRowsUpdated = ({ fromRow, toRow, updated }) => {
    this.setState(state => {
      const rows = state.rows.slice();
      for (let i = fromRow; i <= toRow; i++) {
        console.log(fromRow, toRow, updated)
        rows[i] = { ...rows[i], ...updated };
      }
      this.definedColumn();
      return { rows };
    });
  };

render() {
    this.onGridRowsUpdated(1, 1, {D: '26'});
}

Answer 1

您应该知道，只要组件状态发生变化，就会发生重新渲染。

正如我在您的代码中看到的，您正在调用一个函数来呈现一些表格，并且在其中，您正在调用 setState() 方法，该方法本质上是异步的。这就是重新渲染发生并导致超过最大更新深度

的原因

渲染应该始终保持纯净。这是一个非常糟糕的做法 那里有副作用，调用 setState 是一个很大的危险信号；

更多参考请查看 - setState() method

在渲染内部调用 setState() - Calling setState() in React from render method