Estoy tratando de pasar una función llamada 'clicker()' a través de múltiples bucles anidados. Obtuve el siguiente error:
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.
La función clicker() sigue este camino:
aplicación.js --> uno.js --> dos.js --> tres.js
¿Cómo puedo pasar esta función, iniciada en app.js hasta que llega al último componente? Tenga en cuenta que app.js representa one y esto representa two y esto representa three .
Aquí está mi caja de códigos.
app.js :
import React, { useState } from "react"; import One from "./components/one"; export default function App() { const [counter, updateCounter] = useState(0); let clicker = () => { updateCounter(counter + 1); }; return ( <div className="App"> <h1>how to pass a function through nested components in React </h1> <h3> {counter} </h3> <One passMe={clicker} /> </div> ); } y one.js
import Two from "./two"; function One(props) { return ( <div className="App"> <p> this is the nested function</p> <Two passMe={props.passMe} /> </div> ); } export default One; y two.js
import React from "react"; import Three from './three' export default function Two(props) { return ( <div className="App"> <Three passMe={props.passMe} /> </div> ); } y finalmente three.js
import React from "react"; export default function App(props) { return ( <div > <button passMe={props.passMe(5)}>Cliicker! </button> </div> ); }muchas gracias
¿Por qué está pasando 5 como parámetro, si la función no admite ninguno?
Suponiendo que quieras eso, puedes cambiar esto:
En la aplicación.js :
const clicker = (num = 1) => { updateCounter(counter + num); };En tres.js :
<button onClick={() => props.passMe(5)}>Cliicker!</button>En realidad, está en el camino correcto para pasar una función de un elemento principal a sus componentes secundarios anidados. Pero suponiendo que desea actualizar el contador cada vez que el usuario hace clic en el botón en su componente anidado, es posible que desee pasar onClick(()=> props.passMe(anyValue)) en el componente de botón three.js . De esta manera, la función creada en el padre se invoca en cada clic de botón desde three.js , two.js , one.js hasta app.js .