嘗試使用react組件中的return內部的setstate更新狀態並獲得“最大更新深度超出錯誤”？

Question

我試圖不使用任何生命周期方法而直接在返回值內部更新狀態，並得到如下錯誤：

超過最大更新深度。 當組件重復調用componentWillUpdate或componentDidUpdate內部的setState時，可能會發生這種情況。 React限制了嵌套更新的數量，以防止無限循環。

我針對此錯誤引用了此鏈接 ，但沒有得到適當的解決方案。 是否總是需要使用函數或生命周期方法來更新狀態？

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

1. 您有此錯誤，因為setState每次在組件渲染時都會觸發組件的重新渲染。 這將導致無休止的更新循環。

   除非shouldComponentUpdate（）返回false，否則setState（）將始終導致重新渲染。

2. 是的，有必要使用函數或生命周期方法來更新狀態。 您不得直接在渲染函數中更新狀態。 您應在渲染之前准備好要渲染的數據，並應在生命周期方法或回調中更新狀態。

Answer 2

這是因為您正在render方法中使用setState 。 您不能在render方法內使用setState ，因為它將導致Component一次又一次地重新渲染。 因為在React應用程序中，僅當Props傳遞給該組件或調用setState時才重新渲染Component。

因此，您可以使用componentDidMount生命周期設置狀態。