如何从反应发布数据到表达答案

【问题标题】：How to post data from react to express如何从反应发布数据到表达
【发布时间】：2019-07-23 22:36:58
【问题描述】：

我正在尝试创建一个图书应用程序，我在前端做出反应，在后端做出节点 js。当我尝试在后端创建时，它说无法发布/创建。我必须做什么，该文件夹分为前端和后端。我正在使用 axios。我是反应 js 的新手，请帮忙。我如何从表单中传递数据以响应表达以保存。

this is the react component create

import React, {Component} from 'react';

class Create extends Component{
    render(){
        return(
            <div>
                <br/>
                <div class="container">
                    <form action="http://127.0.0.1:3000/create" method="post">
                        <div style={{width: '30%'}} class="form-group">
                            <input  type="text" class="form-control" name="BookID" placeholder="Book ID"/>
                        </div>
                        <br/>
                        <div style={{width: '30%'}} class="form-group">
                                <input  type="text" class="form-control" name="Title" placeholder="Book Title"/>
                        </div>
                        <br/>
                        <div style={{width: '30%'}} class="form-group">
                                <input  type="text" class="form-control" name="Author" placeholder="Book Author"/>
                        </div>
                        <br/>
                        <div style={{width: '30%'}}>
                            <button class="btn btn-success" type="submit">Create</button>
                        </div> 
                    </form>
                </div>
            </div>
        )
    }
}

export default Create;

这个 index.js 在后端

    var express = require('express');
    var app = express();
    var bodyParser = require('body-parser');
    var session = require('express-session');
    var cookieParser = require('cookie-parser');
    var cors = require('cors');
    app.set('view engine', 'ejs');

    //use cors to allow cross origin resource sharing
    app.use(cors({
        origin: 'http://localhost:3000',
        credentials: true
    }));




var books = [{
        "BookID": "1",
        "Title": "Book 1",
        "Author": "Author 1"
    },
    {
        "BookID": "2",
        "Title": "Book 2",
        "Author": "Author 2"
    },
    {
        "BookID": "3",
        "Title": "Book 3",
        "Author": "Author 3"
    }
]




app.get('/home', function (req, res) {
    console.log("Inside Home Login");
    res.writeHead(200, {
        'Content-Type': 'application/json'
    });
    console.log("Books : ", JSON.stringify(books));
    res.end(JSON.stringify(books));

})

app.post('/create', function (req, res) {
    var newBook = {
        "BookID": req.body.BookID,
        "Title": req.body.Title,
        "Author": req.body.Author
    }
    books.push(newBook)
    console.log(books);



})
//start your server on port 3001
app.listen(3001);
console.log("Server Listening on port 3001");

【问题讨论】：

您发布的所有代码肯定不在一个文件中吗？
是的，它不在同一个文件上
理想情况下，您不会有<form action="http://127.0.0.1:3000/create" method="post">，而是一个提交表单的函数，它执行 POST 调用。你能添加实际发出请求的 axios 代码吗？
这种东西 - stackoverflow.com/questions/50617966/…

标签： node.js reactjs express

【解决方案1】：

有一些错误。以下是一些更新的代码和对所发生情况的描述：

反应 App.js：

import React, { Component } from 'react';
import axios from 'axios';

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

    this.state = {
      bookID: '',
      bookTitle: '',
      bookAuthor: '',
    };
  }

  handleInputChange = e => {
    this.setState({
      [e.target.name]: e.target.value,
    });
  };

  handleSubmit = e => {
    e.preventDefault();

    const { bookID, bookTitle, bookAuthor } = this.state;

    const book = {
      bookID,
      bookTitle,
      bookAuthor,
    };

    axios
      .post('http://localhost:3001/create', book)
      .then(() => console.log('Book Created'))
      .catch(err => {
        console.error(err);
      });
  };

  render() {
    return (
      <div>
        <br />
        <div className="container">
          <form onSubmit={this.handleSubmit}>
            <div style={{ width: '30%' }} className="form-group">
              <input
                type="text"
                className="form-control"
                name="bookID"
                placeholder="Book ID"
                onChange={this.handleInputChange}
              />
            </div>
            <br />
            <div style={{ width: '30%' }} className="form-group">
              <input
                type="text"
                className="form-control"
                name="bookTitle"
                placeholder="Book Title"
                onChange={this.handleInputChange}
              />
            </div>
            <br />
            <div style={{ width: '30%' }} className="form-group">
              <input
                type="text"
                className="form-control"
                name="bookAuthor"
                placeholder="Book Author"
                onChange={this.handleInputChange}
              />
            </div>
            <br />
            <div style={{ width: '30%' }}>
              <button className="btn btn-success" type="submit">
                Create
              </button>
            </div>
          </form>
        </div>
      </div>
    );
  }
}

export default Create;

您在使用 class 而不是 className 时遇到错误。 class 是 react.js 中的保留字，不应使用。
您使用的是我不推荐的默认发布方法。我将帖子拆分为自己的操作，并使用公共库 axios 进行 CORS 帖子调用。我还创建了一个函数来使用 react.js 处理每次按键时的输入变化。
我已将state 添加到您的组件中。当有表单输入将它们存储在state 中时，这很常见。我还将变量的名称更改为标题大小写，这是编写代码变量的常用方法。

Node.js 索引.js：

const express = require('express');
const logger = require('morgan');
const cors = require('cors');

const app = express();

//use cors to allow cross origin resource sharing
app.use(
  cors({
    origin: 'http://localhost:3000',
    credentials: true,
  })
);

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));

let books = [];

app.get('/home', function(req, res) {
  console.log('Inside Home Login');
  res.writeHead(200, {
    'Content-Type': 'application/json',
  });
  console.log('Books : ', JSON.stringify(books));
  res.end(JSON.stringify(books));
});

app.post('/create', function(req, res) {
  const newBook = {
    BookID: req.body.bookID,
    Title: req.body.bookTitle,
    Author: req.body.bookAuthor,
  };

  books.push(newBook);
  console.log(books);
});

//start your server on port 3001
app.listen(3001, () => {
  console.log('Server Listening on port 3001');
});

您没有解析请求的主体，所以它返回为不明确的。我添加了app.use(express.json()); 和 app.use(express.urlencoded({ extended: false })); 应该处理大部分问题。
我更新了req.body 变量以匹配那些来自做出反应。
我添加了模块morgen，您可以在此处看到app.use(logger('dev'));，这有助于为开发目的显示您的所有请求和状态。在这种情况下，它表明您收到 500（内部服务器错误），因为 express 无法读取 bookID 或 undefined（因为未解析正文）。

现在应该可以了，如果您有任何问题，请告诉我。

【讨论】：

【解决方案2】：

我不使用 express some 所以细节可能不适用。

本质上，您必须向您的服务器发送网络请求。如何做到这一点取决于您，最常见的方法是使用 axios（一个库）或使用带有 fetch api 的 vanilla js。

我只会使用 fetch api。它需要两个参数一个 url 和选项。所以应该像这样调用 fetch(url,options)

所以在你的情况下它会是 fetch('localhost:3001/create, options)

选项中应该包含什么。我只是建议你在这里查看 fecth MDN 文档https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

但您的情况需要传递一个对象，该对象的方法属性设置为 post，新书的数据属性设置为您要创建的书的 JSON 序列化对象。

例如

let book ={
    BookId:1,
    Title: "coolBook",
    Author: "Me"
}

fetch("localhost:3001/create",
{
     method: "post",
     data: JSON.stringify(book)
}

当向书籍传递一个字符串而不是一个对象时，您可能必须获取该字符串并将其解析为服务器上的一个对象，以便您表达 /create 处理程序看起来更像：

app.post('/create', function (req, res) {
    var newBook = JSON.parse(req.body.data)
    books.push(newBook)
    console.log(books);
})

在反应方面，您需要创建一个调用上述 fetch 函数的事件处理程序。我建议您观看 react/express 教程，尽管我无法真正涵盖堆栈溢出问题中所需的所有内容，例如：在反应中使用和验证表单、错误处理、异步/等待等。

一切顺利！希望对您有所帮助

【讨论】：

你测试过你的代码吗？我收到这样的回复：can't post Error
```
无法发布 /
```

【解决方案3】：

您应该在您的 /create 端点上得到某种响应
例如：

app.post('/create', function (req, res) {
    var newBook = {
        "BookID": req.body.BookID,
        "Title": req.body.Title,
        "Author": req.body.Author
    }
    books.push(newBook)
    console.log(books);

   res.status(201).json({"some":"response"})


})

【讨论】：