2

出于某种原因，我的 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>

4

2 回答 2

2

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

let [ total, setTotal ] = useState("0")
于 2020-06-22T16:35:23.847 回答
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>

于 2020-06-22T16:35:42.297 回答