如何从axios发帖表达答案

【问题标题】：How to post to express from axios如何从axios发帖表达
【发布时间】：2019-08-07 07:10:45
【问题描述】：

我正在制作一个计算器应用程序，我正在发送数据以表达以进行评估，但出现错误。 handleEqual 是一种在单击相等按钮时做出反应的方法，应该评估和设置状态。我不明白这个错误。我错过了什么。谢谢

createError.js:17 Uncaught (in promise) 错误：网络错误在 createError (createError.js:17) 在 XMLHttpRequest.handleError (xhr.js:87)

reactjs

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";
import axios from "axios";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ""
    };
  }
  addToInput = val => {
    this.setState({
      input: this.state.input + val
    });
  };
  handleEqual = () => {
    // input: math.eval(this.state.input)
    let num = {
      input: this.state.input
    };

    axios.post("http://localhost:5000/path", num).then(res => {
      if (res.status === 200) {
        console.log(res.data);
        this.setState({
          input: res.data
        });
        console.log("Response:", res.data);
      }
    });
  };

  render() {
    return (
      <div className="app">
        <div className="calc-wrapper">
          <Input input={this.state.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}> - </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}> 0 </Button>{" "}
            <Button handleClick={this.addToInput}> . </Button>{" "}
            <Button handleClick={() => this.handleEqual()}> = </Button>{" "}
          </div>{" "}
          <div className="row">
            <ClearButton
              handleClear={() =>
                this.setState({
                  input: ""
                })
              }
            >
              CE{" "}
            </ClearButton>{" "}
          </div>{" "}
        </div>{" "}
      </div>
    );
  }
}

export default App;

表达

app.post("/path", (req, res) => {
  const val = req.body.input;
  console.log(val);

  const calc = mathjs.eval(val);

  res.writeHead(200, {
    "Content-type": "application/json"
  });
  res.end(JSON.stringify(calc));
});

【问题讨论】：

你是在同一台机器上同时运行 react app 和 axios app 吗？
是的，我在同一台机器上运行它们

标签： reactjs express axios

【解决方案1】：

根据docs官方的说法，res.end() 用于快速结束响应，无需任何数据。如果您想向客户端返回值，请使用res.send()。

【讨论】：

【解决方案2】：

如果你想得到字符串化的计算对象，你应该使用res.data.calc

【讨论】：