Estoy tratando de alternar el estado de un componente en ReactJS pero aparece un error que dice:
Se superó la profundidad máxima de actualización. Esto puede suceder cuando un componente llama repetidamente a setState dentro de componentWillUpdate o componentDidUpdate. React limita la cantidad de actualizaciones anidadas para evitar bucles infinitos.
No veo el bucle infinito en mi código, ¿alguien puede ayudarme?
Código del 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;que debido a que está llamando a alternar dentro del método de renderizado, lo que hará que se vuelva a renderizar y alternar llamará nuevamente y volverá a renderizar y así sucesivamente
esta línea en su código
{<td><span onClick={this.toggle()}>Details</span></td>} debe hacer que onClick se refiera a this.toggle no llamarlo
para solucionar el problema haz esto
{<td><span onClick={this.toggle}>Details</span></td>}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.
Olvídate de reaccionar primero:
Esto no está relacionado con reaccionar y nos permite 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() { }; P.1) ¿Cómo llamar a la función que hemos definido?
Respuesta: a();
P.2) ¿Cómo pasar la referencia de la función para que podamos llamarla última?
Respuesta: let fun = a;
Ahora, en cuanto a su pregunta, ha usado paréntesis con el nombre de la función, lo que significa que se llamará a la función cuando se procese la siguiente declaración.
<td><span onClick={this.toggle()}>Details</span></td> Entonces ¿Cómo corregirlo?
¡¡Sencillo!! Simplemente elimine los paréntesis. De esta forma, ha dado la referencia de esa función al evento onClick. Volverá a llamar a su función solo cuando se haga clic en su componente.
<td><span onClick={this.toggle}>Details</span></td> Una sugerencia relacionada con reaccionar:
Evite usar la función en línea como lo sugiere 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. puede acceder a él con 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