使 React 与 math.js 库一起工作答案

【问题标题】：making React work together with math.js library使 React 与 math.js 库一起工作
【发布时间】：2020-10-12 14:17:16
【问题描述】：

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

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

这是我的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>

【问题讨论】：

标签： javascript reactjs react-hooks use-state mathjs

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：