反應：如何設置頁面渲染狀態

Question

我正在使用react並嘗試在頁面渲染上設置狀態，但它一直拋出以下錯誤。

- -錯誤 - -

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

- -錯誤 - -

下面是我的側邊欄組件的代碼。 我正在使用Context API進行數據管理，如代碼中所示，並且嘗試使用通過Context API Consumer獲得的值來設置showContext方法中角色的狀態。

import React, { Component, PropTypes } from "react";
import { Menu, Icon } from "antd";
import { BrowserRouter as Router, Link, Route, Switch } from "react-router-dom";
import AdminPage from "../components/Admin/AdminPage";
import App from "../App";
import "../components/Login/LoginPage";
import { LoginContext } from "../context/LoginContext";

export default class MainMenu extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      roleValue: "admin",
      status: false
    };
    this.showContext = this.showContext.bind(this);
  }

  showContext(context) {

    let role = context;

    if (this.state.roleValue == role) {
      this.setState({
         roleValue : "admin",
      });
    }

  }


  render() {


    if (window.location.href == "http://localhost:8081/") {
      var loginHeader =
        <Menu        
          theme="dark"
          mode="horizontal"
          defaultSelectedKeys={["2"]}
          selectedKeys={[location.pathname]}
        >
          {this.props.children}
          <Menu.Item key="mastering">Mastering</Menu.Item>     
        </Menu>;


    }

    else {
      if (this.state.roleValue == "general") {
        var generalHeader1 =
          <Menu      
            theme="dark"
            mode="horizontal"
            defaultSelectedKeys={["2"]}
            selectedKeys={[location.pathname]}
          >
            {this.props.children}
            <Menu.Item key="mastering">Mastering</Menu.Item>

            <Menu.Item>
              <Link to="/"> Logout</Link>
            </Menu.Item>

            <Menu.Item>
              <Link to="/home">Home</Link>
            </Menu.Item>         
          </Menu>;

      }

      else {
        var generalHeader2 =
          <Menu        
            theme="dark"
            mode="horizontal"
            defaultSelectedKeys={["2"]}
            selectedKeys={[location.pathname]}
          >
            {this.props.children}
            <Menu.Item key="mastering">Mastering</Menu.Item>

            <Menu.Item>
              <Link to="/"> Logout</Link>
            </Menu.Item>

            <Menu.Item>
              <Link to="/admin">Admin</Link>
            </Menu.Item>

            <Menu.Item>
              <Link to="/home">Home</Link>
            </Menu.Item>

          </Menu>;


      }
    }


    return (
      <div>

        {loginHeader}
        {generalHeader1}
        {generalHeader2}

        <LoginContext.Consumer>
          {(context) => (
            this.showContext(context.state.role)
          )
          }
        </LoginContext.Consumer>


      </div>
    );


  }
}

Answer 1

setState()導致對render()的調用。 因此，如果在render()調用setState() ，則將獲得無限遞歸。 不要這樣做。 而是在React和您使用的其他庫定義的框架中找到正確的方法來執行所需的操作。

Answer 2

React組件等待其自身狀態的任何更改，並在正常條件下進行支撐，並且當發生更改時，它將調用Render方法並期望返回一個組件或null。

您要做的是：組件啟動並嘗試進行其第一個渲染，然后設置請求另一個渲染的組件狀態，然后再次設置狀態，這樣就繼續進行。 它相互循環調用。

在Render方法之外設置狀態以避免這種情況。

Answer 3

您正在以錯誤的方式進行操作，因為您正在設置渲染內部的狀態，因此渲染循環將是無限的。

請檢查此鏈接，它將幫助您解決問題，如果在實施后仍然遇到任何問題，請告訴我，我將很樂意為您提供幫助。

參考鏈接： https : //reactjs.org/docs/context.html#dynamic-context

Answer 4

使用React生命周期方法componentDidMount來處理與setState相關的任務。