时间戳

首页 > 解决方案 > 使 React 与 math.js 库一起工作

javascript - 使 React 与 math.js 库一起工作

问题描述

出于某种原因，我的 React 组件似乎无法使用 math.js 库。每当我尝试在控制台上获取以下代码的输出时（不重置状态，它似乎工作正常并且在控制台中输出正确的值），但是如果我尝试evaluate()在 React 组件中应用函数的结果将它应用在setTotal()什么都没有发生。

您能否让我知道我在这里做错了什么以及为什么它不起作用？

这是我的笔

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>

标签： javascriptreactjsreact-hooksuse-statemathjs

解决方案

你有一个错字；useState返回一个数组，您需要从中读取第一个和第二个元素：

let [ total, setTotal ] = useState("0")

推荐阅读