реагировать: как установить состояние при рендеринге страницы

Question

Я работаю с реагировать и пытаюсь установить состояние при отображении страницы, но он продолжает выдавать приведенную ниже ошибку.

--- Ошибка ----

Превышена максимальная глубина обновления. Это может произойти, когда компонент повторно вызывает setState внутри componentWillUpdate или componentDidUpdate. React ограничивает количество вложенных обновлений для предотвращения бесконечных циклов.

--- Ошибка ----

Ниже приведен мой код компонента боковой панели. Я использую Context API для управления данными, как показано в коде, и я пытаюсь установить состояние роли внутри метода showContext со значением, которое я получаю через Context API Consumer.

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

Используйте метод жизненного цикла React componentDidMount для обработки таких задач, связанных с setState.

Answer 2

Компонент React ожидает каких-либо изменений в своем собственном состоянии и поддерживает обычные условия, а когда изменения происходят, он вызывает метод Render и ожидает, что компонент или ноль будут возвращены.

То, что вы сделали: Компонент запускается и пытается выполнить самый первый рендеринг, и вы устанавливаете состояния компонента, которые запрашивают другой рендеринг, и снова устанавливают состояния, и это продолжается следующим образом. Он вызывает друг друга по кругу.

Установите состояние вне метода Render, чтобы избежать этой ситуации.

Answer 3

Вы делаете это неправильно, так как вы устанавливаете состояние внутри рендера, цикл рендеринга будет бесконечным.

Пожалуйста, проверьте эту ссылку, которая поможет вам решить вашу проблему, и все же, если у вас возникнут какие-либо проблемы после внедрения, дайте мне знать, что я буду рад помочь вам.

Ссылка: https://reactjs.org/docs/context.html#dynamic-context

Answer 4

setState() вызывает вызов render(). Поэтому, если вы позвоните setState() в render(), вы получите бесконечную рекурсию. НЕ ДЕЛАЙТЕ ЭТОГО. Вместо этого найдите правильный способ сделать то, что вы хотите, в рамках, определенных React и другими используемыми вами библиотеками.