Блог

эй, я очень новичок в MERN stack, и у меня возникли проблемы с публикацией данных в Axios и express. Возможно, я понял это неправильно, но вот в чем моя проблема. У меня есть форма на странице, с которой я пытаюсь отправить данные на серверную часть, где я затем консольно регистрирую их. страница представляет собой компонент, содержащий функцию onsubmit, которая отправляет запрос post на server.js которые затем утешают.регистрирует это, однако я получаю ОШИБКУ 404 при отправке. Зависимости должны быть установлены правильно

Это моя функция отправки

     onSubmit(e) {
        e.preventDefault();
        
        console.log(`Form submitted:`);
        console.log(` ${this.state.searchquery}`);
        
        const newSearchQuery = {
            searchquery: this.state.searchquery,
        };

        axios.post('http://localhost:3000/', newSearchQuery)
            .then(res => console.log(res.data)).then( 
                (response) => { console.log(response) },
                (error) => { console.log(error) }
            );;
        
        this.setState({
            searchquery: '',

        })
    }
 

это тот самый server.js файл

 const app = express();
const bodyParser = require('body-parser');
const cors = require('cors');
const todoRoutes = express.Router();
const PORT = 3000;


app.use(cors());
app.use(bodyParser.json());


todoRoutes.route('/').post(function(req, res) {
    console.log(req.body);
});

app.listen(PORT, function() {
    console.log("Server is running on Port: "   PORT);
});```
 

Приложение не настроено для использования маршрутов, и именно поэтому оно выдает 404.

Используйте эту строку после todoRoutes.Маршрут():

 app.use(todoRoutes);
 

app.use() используется для регистрации промежуточных программ в приложении основного узла. Поскольку вы используете промежуточное программное обеспечение router express, вам также необходимо зарегистрировать его.

РЕДАКТИРОВАТЬ: Это работает для меня. В случае, если вам нужен полный код:

ReactJS:

 import React from "react";
import axios from 'axios';

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      searchquery: ''
    };
  }
  handleChange = (e) => {
    this.setState({ searchquery: e.target.value });
  }
  onSubmit = (e) => {
    e.preventDefault();
    
    console.log(`Form submitted:`);
    console.log(` ${this.state.searchquery}`);
    
    const newSearchQuery = {
        searchquery: this.state.searchquery,
    };

    axios.post('http://localhost:3000/', newSearchQuery)
        .then(res => console.log(res.data)).then( 
            (response) => { console.log(response) },
            (error) => { console.log(error) }
        );;
    
    this.setState({
        searchquery: '',
    })
  }
  render() {
    return (<form onSubmit={this.onSubmit}>
      <input type="text" value={this.state.searchquery} name="searchquery" id="searchquery" onChange={this.handleChange} />
      <button type="submit">Submit</button>
    </form>);
  }
}

export default App;
 

Экспресс-код:

 const express = require("express");
const app = express();
const bodyParser = require('body-parser');
const cors = require('cors');
const todoRoutes = express.Router();
const PORT = 3000;


app.use(cors());
app.use(bodyParser.json());


todoRoutes.route('/').post(function(req, res) {
    console.log(req.body);
});

app.use(todoRoutes);

app.listen(PORT, function() {
    console.log("Server is running on Port: "   PORT);
});