javascript - tutorial - maximum update depth exceeded. this can happen when a component repeatedly calls setstate

ReactJS: error de profundidad de actualización máxima excedida

Question

Estoy tratando de alternar el estado de un componente en ReactJS pero aparece un error que dice:

Profundidad máxima de actualización excedida. Esto puede suceder cuando un componente llama repetidamente a setState dentro de componentWillUpdate o componentDidUpdate. React limita el número de actualizaciones anidadas para evitar bucles infinitos.

No veo el bucle infinito en mi código, ¿alguien puede ayudarme?

Código de componente 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;

Answer 1

Debe pasar el objeto de evento al llamar a la función:

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

Si no necesita manejar el evento onClick, también puede escribir:

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

Ahora también puede agregar sus parámetros dentro de la función.

Answer 2

eso porque al llamar alternar dentro del método de renderizado, lo que hará que se vuelva a renderizar y alternar, se volverá a llamar y se volverá a renderizar nuevamente, etc.

esta línea en tu código

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

necesita hacer que onClick refiera a esto. this.toggle no llamarlo

para solucionar el problema haz esto

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

Answer 3

si no necesita pasar argumentos a la función, simplemente elimine () de la función como se muestra a continuación:

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

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

pero si quieres pasar argumentos, debes hacer lo siguiente:

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

Answer 4

Olvídate de la reacción primero:
Esto no está relacionado con reaccionar y comprender los conceptos básicos de Java Script. Por ejemplo, ha escrito la siguiente función en Java Script (el nombre es A).

function a() {

};

Q.1) ¿Cómo llamar a la función que hemos definido?
Respuesta: a ();

Q.2) ¿Cómo pasar la referencia de función para que podamos llamarla última?
Respuesta: let fun = a;

Ahora, volviendo a su pregunta, ha utilizado la parálisis con el nombre de la función, lo que significa que se llamará a la función cuando se presente la siguiente declaración.

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

Entonces, ¿cómo corregirlo?
¡¡Sencillo!! Solo elimina el paréntesis. De esta manera, ha dado la referencia de esa función al evento onClick. Devolverá su función solo cuando se haga clic en su componente.

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

Una sugerencia lanzada para reaccionar:
Evite usar la función en línea según lo sugerido por alguien en las respuestas, puede causar problemas de rendimiento. Evite seguir el código, creará una instancia de la misma función una y otra vez cada vez que se llame a la función (la instrucción lamda crea una nueva instancia cada vez).
Nota: y no es necesario pasar el evento (e) explícitamente a la función. puedes acceder a él en la función sin pasarlo.

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

https://cdb.reacttraining.com/react-inline-functions-and-performance-bdff784f5578

Answer 5

ReactJS: error de profundidad de actualización máxima excedida

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

¿por qué eso?

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

La función onDigit establece el estado, lo que provoca un rerender, lo que hace que onDigit se active porque ese es el valor que está configurando como onClick, lo que hace que se establezca el estado que provoca un rerender, lo que hace que onDigit se active porque ese es el valor que usted '' re ... Etc

Answer 6

onClick debe llamar a la función, eso se llama alternar su función.

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