web-dev-qa-db-fra.com

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

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 empêcher 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;
javascriptreactjs
86
Maja Okholm

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 onClick faire référence à this.toggle ne pas l'appeler

to fix le problème faire ceci

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

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.

13
Florent Philippe

Oubliez la réaction en premier:
Cela n’a rien à voir avec la réaction et la compréhension des concepts de base de Java Script. Par exemple, vous avez écrit la fonction suivante dans le script Java (le nom est A).

function a() {

};

Q.1) Comment appeler la fonction que nous avons définie?
Ans: a ();

Q.2) Comment passer une référence de fonction afin que nous puissions l'appeler plus tard?
Ans: let fun = a;

J'en viens maintenant à votre question, vous avez utilisé des parenthèses avec le nom de la fonction, ce qui signifie que cette fonction sera appelée lors du rendu de l’instruction suivante.

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

Alors comment le corriger?
Facile!! Il suffit de supprimer les parenthèses. De cette façon, vous avez donné la référence de cette fonction à l’événement onClick. Il ne rappellera votre fonction que lorsque vous cliquerez sur votre composant.

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

Une suggestion répétée pour réagir:
Évitez d’utiliser la fonction en ligne suggérée par les réponses, cela pourrait entraîner des problèmes de performances. Évitez de suivre le code, il créera une instance de la même fonction encore et encore chaque fois que cette fonction sera appelée (l'instruction lamda crée une nouvelle instance à chaque fois).
Remarque: et inutile de transmettre l'événement (e) explicitement à la fonction. vous pouvez y accéder avec la fonction sans la transmettre.

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

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

5
Piyush N

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, faites comme ci-dessous:

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

ReactJS: erreur maximale de la profondeur de mise à jour

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

0
Rizo