Estoy tratando de hacer una calculadora usando reaccionar, y no puedo usar 'eval' en el campo de entrada. este siguiente código da este error-
import React, { Component } from "react"; class myApp extends React.Component { state = { equation: "", }; handleClick = (e) => { this.setState({ equation: e.target.value }); console.log(eval(this.state.equation)); }; render() { return ( <div> <input type="text" value={this.state.equation} onChange={this.handleClick} ></input> <h1>{this.state.equation}</h1> <button onClick>enter</button> </div> ); } } export default myApp;Error-
SyntaxError: Unexpected end of input¿Por qué ocurre este error y cómo puedo solucionarlo?
Primero debe establecer el valor después de poner el método eval() . eval('10 + 10') funciona bien, pero cuando el valor es eval('10+') también arroja el error en javaScript.
Al reaccionar después del valor establecido, puede convertir o probar vie eval() .
Si ingresa un valor, debería generarse como se muestra a continuación:
1 10 10+ 10+2 10+20 Entonces, cuando el valor es 10+ , arroja el error.
Puedes leer más sobre eval
Puedes probar de esta manera.
const { useState, useEffect } = React; const App = () => { const [state, setState] = useState({ equation: "" }); useEffect(() => {}, [state.equation]); const handleChange = (e) => { const value = e.target.value; console.log(value); setState({ equation: value }); }; const handleOnClick = (e) => { console.log(eval(state.equation)); setState({ equation: eval(state.equation) }); }; return ( <div> <input type="text" value={state.equation} onChange={handleChange} /> <h1>{state.equation}</h1> <button onClick={handleOnClick}>enter</button> </div> ); }; ReactDOM.render(<App />, document.getElementById("root")); <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script> <div id="root"></div>setState dentro de los controladores de eventos es asíncrono, lo que significa que actualizará this.state después de que finalice el controlador de eventos (esto permite react para procesar por lotes varias llamadas de setState en una sola actualización).
En su caso, está llamando a eval con el valor de estado anterior - "" (y esto da un error).
En lugar de usar this.state.equation intente:
console.log(eval(e.target.value));