Попытка передать данные от реакции (интерфейсная часть) на сервер узла (серверная часть)

Question

Я пытаюсь передать данные с моего реагирующего конца из функции onSubmit на мой узел / экспресс-сервер.

Данные не отображаются в консоли и на странице, так как они просто говорят "undefined". Может, кто-нибудь может мне помочь? Спасибо!

Файл App.js

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      generalDetails: "Text",
      fName: "Text",
      mName: "Text",
      LName: "Text",
      gender: "Text"
    };

    this.onContentChange = this.onContentChange.bind(this);
    this.onSubmitForm = this.onSubmitForm.bind(this);
  }

  render() {
    return (
      <div className="App">
        <PageOne handleChange={this.onContentChange} />
        <PageTwo handleChange={this.onContentChange} />
        <PageThree handleChange={this.onContentChange} />
        <PageFour handleChange={this.onContentChange} />
        <PageFive handleChange={this.onContentChange} />
        <PageSix handleChange={this.onContentChange} />

        <Button onClick={this.onSubmitForm}>Submit Form</Button>

        <br />
        <br />
      </div>
    );
  }

  onSubmitForm = e => {
    e.preventDefault();
    let data = {
      generalDetails: this.state.generalDetails,
      firstName: this.state.firstName,
      middleName: this.state.middleName,
      lastName: this.state.lastName
    };

    axios
      .post("http://localhost:5000/home", data)
      .then(() => {
        //do something
      })
      .catch(() => {
        console.log("Something went wrong. Please try again later");
      });


  onContentChange(fieldname, data) {
    console.log("On Content Change", data);

    this.setState({
      [fieldname]: data
    });
  }
}

export default App;

Сервер

const express = require("express");
const app = express();
const port = 5000;

const cors = require("cors");
app.use(cors());
var bodyParser = require("body-parser");
app.use(bodyParser.json()); // to support JSON-encoded bodies
app.use(
  bodyParser.urlencoded({
    // to support URL-encoded bodies
    extended: true
  })
);

app.get("/home", (req, res) => {
    console.log("Hello from .get /home", req.body.generalDetails );

})




app.post("/home", (req, res) => {

  const data = [{ generalDetails: req.body.generalDetails }];


  res.json(data);
});

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

Answer 1

Ваш вопрос очень расплывчатый, поэтому я постараюсь ответить в меру своих возможностей, просто взглянув на ваш код.Откуда вы получаете неопределенный от?Где вы пытаетесь войти в консоль?И вы получаете какие-либо ошибки в консоли браузера и / или консоли вашего узла?Это вопросы, которые у меня есть по поводу вашего вопроса, но вот что я думаю о вашей проблеме:

Если вы пытаетесь отправить запрос на получение от вашего внешнего интерфейса и пытаетесь получить его на

app.get("/home", (req, res) => {
  console.log("Hello from .get /home", req.body.generalDetails );
})

тогда вам нужно отправить запрос на получение от вашего интерфейса, а не почтовый запрос.Прямо сейчас ваша функция axios делает почтовый запрос, поэтому он будет получен в вашем бэкэнде на почтовом маршруте, а не на маршруте получения.

Если вы пытаетесь сделать почтовый запрос, вы получитеэто на почтовом маршруте, и то, что ваш код делает сейчас, это отправляет generalDetials обратно.Проблема в том, что у вас есть пустая функция, получающая запрос обратно с вашего сервера.Делаете ли вы сообщение или получаете запрос, вам нужно что-то сделать с этой информацией.

Так что сделайте следующее, чтобы увидеть, что происходит.Сделайте почтовый запрос, а затем зарегистрируйте ответ на консоли вашего браузера:

axios
  .post("http://localhost:5000/home", data)
  .then(result => {
    console.log(result)
  })
  .catch(() => {
    console.log("Something went wrong. Please try again later");
  });

Если вы получаете общие данные обратно в данных axios, то вы успешно делаете почтовый запрос.

Затем сделайте запрос на получение:

axios
  .get("http://localhost:5000/home", data)
  .then(result => {
    console.log(result)
  })
  .catch(() => {
    console.log("Something went wrong. Please try again later");
  });

Если вы регистрируете информацию в консоли своего узла, то вы успешно выполняете запрос на получение.Потому что в вашем бэкэнде вы входите только в консоль при получении маршрута.

Также похоже, что у вас есть синтаксическая ошибка.Вы забыли закрыть функцию onSubmitForm.Вы пропустили закрывающую фигурную скобку.