尝试导入错误，无法编译反应应用程序答案

【问题标题】：Attempted import error, failed to compile react app尝试导入错误，无法编译反应应用程序
【发布时间】：2020-06-21 05:43:36
【问题描述】：

我收到以下错误，如果有人能指出我正确的方向，我会很高兴 :) 我尝试了不同的方法，但没有任何效果。

编译失败 ./src/App.jsx 尝试导入错误：“eval”未从“mathjs”导出（导入为“math”）。

import React, { Component } from 'react';
import './App.css';
import { Button } from './components/Button';
import { Input } from './components/Input';
import { ClearButton } from './components/ClearButton';
import * as math from 'mathjs';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      input: ""
    };
  }

  addToInput = val => {
    this.setState({input: this.state.input + val});
  }

  handleEqual = () => {
    this.setState({input: math.eval(this.state.input)});
  }

  render() {
    return (
      <div className="app">
        <div className="calc-wrapper">
          <Input input={this.state.input}></Input>
          <div className="row">
            <Button handleClick={this.addToInput}>7</Button>
            <Button handleClick={this.addToInput}>8</Button>
            <Button handleClick={this.addToInput}>9</Button>
            <Button handleClick={this.addToInput}>/</Button>
          </div>
          <div className="row">
            <Button handleClick={this.addToInput}>4</Button>
            <Button handleClick={this.addToInput}>5</Button>
            <Button handleClick={this.addToInput}>6</Button>
            <Button handleClick={this.addToInput}>X</Button>
          </div>
          <div className="row">
            <Button handleClick={this.addToInput}>1</Button>
            <Button handleClick={this.addToInput}>2</Button>
            <Button handleClick={this.addToInput}>3</Button>
            <Button handleClick={this.addToInput}>+</Button>
          </div>
          <div className="row">
            <Button handleClick={this.addToInput}>.</Button>
            <Button handleClick={this.addToInput}>0</Button>
            <Button handleClick={() => this.handleEqual()}>=</Button>
            <Button handleClick={this.addToInput}>-</Button>
          </div>
          <div className="row">
              <ClearButton handleClear={ () => this.setState({input: "" })}>Clear</ClearButton>
          </div>
        </div>
      </div>
    );
  }
}
export default App;

【问题讨论】：

链接到 lib mathjs。 eval 方法好像不存在。
不需要导入mathjs，直接用eval()函数代替math.eval即可。 java 脚本本身就提供了该功能。
这个问题解决了吗？下面有 2 个答案。

标签： javascript reactjs

【解决方案1】：

尝试导入为默认导入，然后使用它

import { evaluate } from 'mathjs'; 
console.log(evaluate('2 + 2'));

【讨论】：

【解决方案2】：

作为评估导入

import * as math from 'mathjs';
console.log(math.evaluate('2 + 3'))

// Or
import {evaluate } from 'mathjs';
console.log(evaluate('2 + 3'))

【讨论】：

【解决方案3】：

我遇到了完全相同的问题，和你一样，我做了很多来解决它，但都失败了。我最终如何解决它如下：首先确保您已使用以下命令从命令行下载了 mathjs： npm install mathjs;并且在你的反应代码的顶部，放置语句： import * as math from 'mathjs'; （我可以从您的代码中看到您所做的后者）。

现在关键的第二步是，不要使用 math.eval(expr) 或 math.evaluate(expr) 来评估您的表达式，而是使用 parse、compile 与 evaluate 结合使用，如下例所示：

const node1= math.parse('2 + 3');
const code1= node1.compile();
code1.evaluate(); // 5

这是我经过多次失败的尝试后最终尝试的方法，但它确实有效。这是 mathjs 库中列出的评估表达式的另一种方法。我知道这个问题被问到已经有几个月了，但这个解决方案在未来仍然可以帮助到某人。

【讨论】：

【解决方案4】：

使用 math.evaluate() 而不是 math.eval()。

参考这个https://www.npmjs.com/package/mathjs

【讨论】：

我希望这个答案是可用的。

【解决方案5】：

我遇到了同样的问题，我解决了如下：

我做了一个改变：

  handleEqual = () => {
    this.setState({ input: math.eval(this.state.input) });
  };

将eval 更改为evaluate

  handleEqual = () => {
    this.setState({ input: math.evaluate(this.state.input) });
  };

现在它可以完美运行了。我希望这对你有很大帮助

【讨论】：