尝试在反应组件的返回中使用 setstate 更新状态并获得“最大更新深度超出错误”？

Posted 2023-02-22

【中文标题】尝试在反应组件的返回中使用 setstate 更新状态并获得“最大更新深度超出错误”？

【英文标题】：Trying to update the state using setstate inside the return in react component and getting "Maximum update depth exceeded error"?

【发布时间】：2019-10-06 14:49:12

【问题描述】：

我正在尝试直接在 return 内部更新状态，而不使用任何生命周期方法，并且收到如下错误：

已超过最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时，可能会发生这种情况。 React 限制了嵌套更新的数量以防止无限循环。

上述错误我参考了this link，但我没有得到合适的解决方案。是否总是需要使用函数或生命周期方法来更新状态？

import React,  Component  from "react";

import "./App.css";

class App extends Component 
  state = 
    name: "john"
  ;

  render() 
    console.log(this.state);
    return (
      <div className="App">
        <header className="App-header">
          this.state.name
          this.setState( name: "abc" )
        </header>
      </div>
    );
  


export default App;

我编写了上面的代码并收到错误，但在控制台中，状态值正在更新并多次打印。

【参考方案1】：

您遇到此错误是因为setState 每次在您的组件呈现时都会触发组件的重新呈现。这会导致无限循环的更新。

setState() 总是会导致重新渲染，除非 shouldComponentUpdate() 返回 false。

是的，需要使用函数或生命周期的方法来更新状态。您不能直接在渲染函数中更新状态。您应该在渲染之前准备好数据以进行渲染，并且应该在生命周期方法或回调中更新状态。

【参考方案2】：

这是因为您在 render 方法中使用了 setState。您不能在render 方法中使用setState，因为它会导致组件一次又一次地重新渲染。因为在反应应用程序中，只有当 Props 传递给该组件或调用 setState 时，才会重新渲染组件。

所以你可以使用componentDidMount生命周期来设置状态。