让 React 与 math.js 库一起工作

Question

出于某种原因，我的 React 组件似乎无法使用 math.js 库。每当我尝试在控制台上获取以下代码的输出时（在不重置状态的情况下，它似乎工作正常并且在控制台中输出了正确的值），但是如果我尝试应用 evaluate() 的结果在 React 组件中应用函数 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>

Answer 1

你打错了； useState returns 一个数组，需要从中读取第一个和第二个元素：

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

Answer 2

您应该将 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>

让 React 与 math.js 库一起工作

making React work together with math.js library

javascript

reactjs

mathjs

react-hooks

use-state