Question

我试图不使用任何生命周期方法就直接在返回值内部更新状态，并且出现如下错误：

已超过最大更新深度。当组件重复调用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;

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

Answer 1

出现此错误是因为setState每次在组件渲染时都会触发组件的重新渲染。这将导致无休止的更新循环。

setState（）将始终导致重新渲染，除非shouldComponentUpdate（）返回false。
是的，有必要使用函数或生命周期方法来更新状态。您不得直接在渲染函数中更新状态。您应该在渲染之前准备好要渲染的数据，并应该在生命周期方法或回调中更新状态。

Answer 2

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

因此，您可以使用componentDidMount生命周期来设置状态。

尝试使用react组件中的return内的setstate更新状态并获取“最大更新深度超出错误”？

2 个答案: