时间戳

首页 > 解决方案 > 无法使用 Axios 以 React 形式将数据发布到 NodeJS

javascript - 无法使用 Axios 以 React 形式将数据发布到 NodeJS

问题描述

我想从反应表单获取票证价值到 nodeJS，然后根据收到的票证，我必须执行一些任务并将结果取回前端。我的代码似乎很好，但它没有在环境中运行。

表单.js

import React, { Component } from 'react'
import axios from 'axios'
class Formdata extends Component{
    constructor() {
        super();
        this.state = {
          ticket:""
        };
      }
    onChanges(val){
        console.log(val);
        this.setState({
            ticket:val
        })
        console.log(this.state.ticket)
    }
    handleSubmit() {

        console.log(this.state.ticket)
        const var2= {
            tic:this.state.ticket
        };
        axios.post("/user",{
            var1: var2
        })
        .then((response)=> {
            console.log("Data submitted successfully");
         }).catch((error)=> {
            console.log("got errr while posting data", error);
         });
    }

    render(){
        return(
            <div>
                <form onSubmit={this.handleSubmit} method="POST">
                    <br/>
                    <input type="text" id="ticket" name="ticket" onChange={e=>this.onChanges(e.target.value)} placeholder="Ticket Number"/>
                    <button type="submit">SUBMIT</button>
                </form>
            </div>
        )
    }
}

export default Formdata;

服务器.js

const express = require('express');

const app = express();

app.post('/user',function(request,response){
  const query1=request.body.var1;
  console.log(query1)
  response.query1;
  });


const port = 5000;

app.listen(port, () => `Server running on port ${port}`);

标签： javascriptnode.jsreactjsexpress

解决方案

你试试下面的代码：

const express = require('express');

const app = express();

app.use(express.json())
app.use(express.urlencoded({ extended: true }))

app.post('/user',function(request,response){
  const body =request.body;
  console.log(body);
  res.send(body);
  });

app.listen(5000, () => `Server running on port 5000`);

您可以将代码复制到您的代码中并从邮递员那里调用 api：

  1. 接口网址：localhost:5000/users
  2. 将方法更改为：POST方法
  3. 不要忘记将 json 对象添加到body
  4. 向后端发送请求

我希望它的工作。

推荐阅读