ReactJS: erreur de dépassement de la profondeur de mise à jour maximale

Question

J'essaie de faire basculer l'état d'un composant dans ReactJS mais j'obtiens une erreur indiquant:

Profondeur maximale de mise à jour dépassée. Cela peut arriver lorsqu'un composant appelle à plusieurs reprises setState dans composantWillUpdate ou composantDidUpdate. React limite le nombre de mises à jour imbriquées pour éviter les boucles infinies.

Je ne vois pas la boucle infinie dans mon code, quelqu'un peut-il aider?

Code du composant 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

parce que vous appelez bascule à l'intérieur de la méthode de rendu, ce qui entraînera un nouveau rendu et une bascule appellera à nouveau et restituera de nouveau le rendu, etc.

cette ligne à votre code

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

vous devez faire en sorte que onClick réfère pas à this.toggle

pour résoudre le problème faire ceci

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

Answer 2

Oublier le réagissent d'abord:
Ce n'est pas lié à réagir et nous permettent de comprendre les concepts de base de Java Script. Par Exemple, vous avez écrit à la suite de la fonction en java script (le nom est Un).

function a() {

};

Q. 1) Comment appeler la fonction que nous avons défini?
Réponse: a();

Q. 2) Comment passer de référence de la fonction, de sorte que nous pouvons l'appeler-ci?
Réponse: laissez le plaisir = a;

Maintenant, pour en venir à votre question, vous avez utilisé paranthesis avec le nom de la fonction, dire que la fonction sera appelée lorsque l'instruction suivante sera rendu.

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

Alors Comment le corriger?
Simple!! Seulement supprimer les parenthèses. Par cette façon, vous avez donné la référence de cette fonction à l'événement onClick. Il sera de retour d'appel de votre fonction, votre composant est cliqué.

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

Une suggestion releated à réagir:
Évitez d'utiliser la fonction inline comme l'a suggéré quelqu'un à des réponses, il peut provoquer des problèmes de performances. Éviter de code suivant, Il va créer une instance de la même fonction, encore et encore, chaque fois que la fonction sera appelée (lamda instruction crée une nouvelle instance à chaque fois).
Note: et pas besoin de passer de l'événement (e) explicitement à la fonction. vous pouvez y accéder avec la fonction sans passer.

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

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

Answer 3

Vous devriez passer l'objet event lorsque vous appelez la fonction:

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

Si vous n'avez pas besoin de gérer l'événement onClick, vous pouvez également taper:

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

Maintenant, vous pouvez également ajouter vos paramètres dans la fonction.

Answer 4

si vous n'avez pas besoin de passer des arguments à function, supprimez simplement () la fonction comme ci-dessous:

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

mais si vous voulez passer des arguments, vous devriez faire comme ci-dessous:

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

Answer 5

ReactJS: erreur de dépassement de la profondeur de mise à jour maximale

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

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

pourquoi ça?

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

La fonction onDigit définit l'état, ce qui provoque un rendu, ce qui provoque le déclenchement de onDigit, car c'est la valeur que vous définissez comme onClick. re… Etc