ReactJS: превышена максимальная глубина обновления

Я пытаюсь переключить состояние компонента в ReactJS, но я получаю сообщение об ошибке:

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

Я не вижу бесконечный цикл в моем коде, кто-нибудь может помочь?

Код компонента ReactJS:

import React, { Component } from 'react';
import styled from 'styled-components';

class Item extends React.Component {
    constructor(props) {
        super(props);     
        this.toggle= this.toggle.bind(this);
        this.state = {
            details: false
        } 
    }  
    toggle(){
        const currentState = this.state.details;
        this.setState({ details: !currentState }); 
    }

    render() {
        return (
            <tr className="Item"> 
                <td>{this.props.config.server}</td>      
                <td>{this.props.config.verbose}</td> 
                <td>{this.props.config.type}</td>
                <td className={this.state.details ? "visible" : "hidden"}>PLACEHOLDER MORE INFO</td>
                {<td><span onClick={this.toggle()}>Details</span></td>}
            </tr>
    )}
}

export default Item;

Ответ 1

потому что вы вызываете переключение внутри метода рендеринга, который вызовет повторную визуализацию и переключение, снова вызовет повторную визуализацию и т.д.

эта строка в вашем коде

{<td><span onClick={this.toggle()}>Details</span></td>}

вам нужно сделать onClick ссылкой на this.toggle, не вызывая его

до исправить проблема делает это

{<td><span onClick={this.toggle}>Details</span></td>}

Ответ 2

Вы должны передать объект события при вызове функции:

{<td><span onClick={(e) => this.toggle(e)}>Details</span></td>}

Если вам не нужно обрабатывать событие onClick, вы также можете набрать:

{<td><span onClick={(e) => this.toggle()}>Details</span></td>}

Теперь вы также можете добавить свои параметры в функцию.

Ответ 3

Забудьте о реакции первым:
Это не связано с реакцией и позволяет нам понять основные концепции Java Script. Например, вы написали следующую функцию в сценарии Java (имя A).

function a() {

};

Q.1) Как вызвать функцию, которую мы определили?
Ответ: a();

Q.2) Как передать ссылку на функцию, чтобы мы могли вызвать ее позже?
Ответ: пусть веселье = а;

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

<td><span onClick={this.toggle()}>Details</span></td>

Ответ 4

если вам не нужно передавать аргументы функции, просто удалите() из функции, как показано ниже:

<td><span onClick={this.toggle}>Details</span></td>

но если вы хотите передать аргументы, вы должны сделать, как показано ниже:

<td><span onClick={(e) => this.toggle(e,arg1,arg2)}>Details</span></td>

Ответ 5

ReactJS: ошибка превышения максимальной глубины обновления

inputDigit(digit){
  this.setState({
    displayValue: String(digit)
  })

<button type="button"onClick={this.inputDigit(0)}>

Почему так?

<button type="button"onClick={() => this.inputDigit(1)}>1</button>

Функция onDigit устанавливает состояние, которое вызывает повторное рендеринг, что приводит к срабатыванию onDigit, потому что это значение, которое вы устанавливаете как onClick, которое заставляет быть установлено состояние, которое вызывает повторное рендеринг, который вызывает onDigit, потому что это значение, которое вы… Etc

Ответ 6

просто измените onClick = {this.something} на onClick = {() => this.something}

Ответ 7

это плохо {Подробности} это хорошо {this.toggle()}> Детали}

Ответ 8

onClick Вы должны вызвать функцию, которая вызывает переключение вашей функции.

onClick={() => this.toggle()}