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

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相关的任务。