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()的调用。因此，如果您在setState()中调用render()，则将获得无限递归。不要这样做。而是在React和您使用的其他库定义的框架中找到正确的方法来完成您想要的事情。

Answer 2

React组件会等待其自身状态的任何更改，并在正常情况下支持道具，并且当发生更改时，它将调用Render方法并期望返回一个组件或null。

您所做的是：组件启动并尝试进行其第一个渲染，然后设置请求另一个渲染的组件状态，然后再次设置状态，这样就继续进行。它会相互循环调用。

在Render方法之外设置状态以避免这种情况。

Answer 3

您正在以错误的方式进行操作，因为您正在设置渲染内部的状态，因此渲染循环将是无限的。

请检查此链接，它将帮助您解决问题，如果实施后仍然遇到任何问题，请告诉我，我将很乐意为您提供帮助。

参考链接：https://reactjs.org/docs/context.html#dynamic-context

Answer 4

使用React生命周期方法componentDidMount处理与setState相关的任务。

Answer 5

在你的代码中，你在渲染中编写了代码，这不是好的做法。请从渲染中删除代码并将其添加到 componentDidMount 中。使用 componentDidMount() 生命周期，这将使您的生活更轻松，代码应如下所示。

 componentDidMount() {
     this.showContext(this.state.roleValue)
 }

正如我所见，每个用户都有不同的侧边栏。最好的做法是为侧边栏的每个角色创建单独的组件，并将该特定组件显示为角色明智的。

反应：如何设置页面渲染状态

5 个答案: