使React与math.js库协同工作
使React与math.js库协同工作
提问于 2020-06-23 00:30:55
由于某些原因，我的React组件似乎不能与math.js库一起工作。每当我试图在控制台上获得以下代码的输出时(没有重置状态，它似乎工作正常，控制台中输出了正确的值)，但是如果我试图在React组件中应用evaluate()函数的结果，并在setTotal()中应用它，则没有任何反应。
你能让我知道我在这里做错了什么吗?为什么它不工作？
这是我的pen
function App() {
const expression = "3+5*6-2/4"
const { total, setTotal } = React.useState("0")
function handleCalc() {
const total = math.compile(expression)
const result = total.evaluate()
setTotal(result)
}
return (
<div>
<h1>Calculator</h1>
<p>{`Expression: ${expression}`}</p>
<button onClick={handleCalc}>Calculate</button>
<h1>{total}</h1>
</div>
)
}
ReactDOM.render(<App />, document.getElementById("root"))<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.3.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/7.0.1/math.min.js"></script>
<body>
<div id="root"></div>
</body>
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-06-23 00:35:42
您应该将useState作为数组进行析构。
const [total, setTotal] = React.useState("0")
const { useState } = React;
function App() {
const expression = "3+5*6-2/4"
const [total, setTotal] = useState("0")
const handleCalc = () => {
const total = math.compile(expression)
const result = total.evaluate()
setTotal(result)
}
return <div>
<h1>Calculator</h1>
<p>Expression {expression}</p>
<button onClick={handleCalc}>Calculate</button>
<h1>{total}</h1>
</div>
}
ReactDOM.render(<App />, document.getElementById("root")) <script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/7.0.1/math.min.js"></script>
<body>
<div id="root"></div>
</body>
Stack Overflow用户
发布于 2020-06-23 00:35:24
您有一个输入错误；useState返回一个数组，您需要从该数组中读取第一个和第二个元素：
let [ total, setTotal ] = useState("0")页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62519182
复制相关文章
相似问题
腾讯云开发者
