我正在嘗試使用 react 制作計算器，但無法在輸入欄位中使用“eval”。下面的代碼給出了這個錯誤 -
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;
錯誤-
SyntaxError: Unexpected end of input
為什么會發生此錯誤，我該如何解決？
uj5u.com熱心網友回復：
setState內部事件處理程式是異步的 - 這意味著它將this.state在事件處理程式完成后更新（這允許react將多個setStates 呼叫批處理為一個更新）。
在您的情況下，您使用先前的狀態值呼叫 eval - ""（這會產生錯誤）。
而不是使用this.state.equation嘗試：
console.log(eval(e.target.value));
uj5u.com熱心網友回復：
您需要在放入eval()方法后先設定值。
eval('10 10')作業正常，但當值是在 javaScript 中也eval('10 ')拋出error。
在設定值后做出反應，您可以轉換或嘗試 vie eval()。
如果您輸入值，它應該輸出如下：
1
10
10
10 2
10 20
所以當價值是10 它的時候拋出錯誤。
您可以閱讀有關eval 的更多資訊
你可以試試這個方法。
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/355949.html
標籤：javascript 反应 评估