0
230
VistasError de reacción: demasiados re-renderizados. mientras usa la función de flecha
Estoy haciendo una calculadora en reacción en la que hice botones para números y cuando se presiona el botón "7", se agrega 7 en el campo de entrada.
Mi acercamiento:
Estoy usando useState para hacer esto. Hice una función de flecha funinpval que toma el número como cadena en el argumento, luego estoy usando esta función con diferentes botones en el controlador de clic al pasar los números respectivos como argumentos. pero estoy recibiendo un error 
import React from 'react' import { useState } from 'react'; export const Calculator = () => { const [inpval, setInpval] = useState("") const funinpval = (num) => { setInpval(inpval + num) } return( <> <input type="text" value={inpval}> <button onClick={funinpval("7")}>7</button> <button onClick={funinpval("8")}>8</button> </> )Alguien puede ayudarme porfavor
3 Respuestas
Responde la pregunta0
<button onClick={funinpval("7")}>7</button> <button onClick={funinpval("8")}>8</button>No está esperando que el usuario haga clic en los botones para ejecutar las funciones, sino que se ejecutan directamente en cada fase de renderizado. Lo que significa que el componente renderiza -> actualización de estado -> nueva renderización -> nueva actualización de estado -> ...
Arreglarlo:
<button onClick={() => funinpval("7")}>7</button> <button onClick={() => funinpval("8")}>8</button>0
Hay un error de sintaxis en la forma en que proporciona los controladores de eventos.
Debe proporcionar controladores de eventos algo así como:
<button onClick={() => funinpval("7")}>7</button> <button onClick={() => funinpval("8")}>8</button> Simplemente escribiendo onClick={funinpval("7")} llamará inmediatamente a la función mientras se renderiza, lo que establece el estado. Cuando el estado se actualizó, el componente se vuelve a renderizar. Luego, nuevamente, mientras se vuelve a renderizar, se llamó a esta función y así sucesivamente.
0
onClick={funinpval("7")}devolverá el resultado de llamar a esa función al oyente en lugar de una referencia a la función que el oyente puede llamar. Entonces, está configurando el estado inmediatamente con esos dos botones que están causando el renderizado que está llamando a la función nuevamente que está configurando el estado nuevamente ... ¡infinito!
En este ejemplo, recojo el textContent de texto del botón y lo uso para establecer el nuevo estado de entrada, y luego simplemente puede pasar la referencia a la función al controlador y dejar que la función se ocupe de cómo se establece el estado.
const { useState, useEffect } = React; function Calulator() { const [inpval, setInpval] = useState(0); function funinpval(e) { // Grab the `textContent` of the button and // relabel it to `num` making sure to coerce the // text to a number first const { textContent: num } = e.target; setInpval(inpval + Number(num)); } return( <div> <input type="text" value={inpval} /> <button onClick={funinpval}>7</button> <button onClick={funinpval}>8</button> </div> ) }; // Render it ReactDOM.render( <Calulator />, document.getElementById("react") ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="react"></div>