Question

我的问题是我正在尝试为我的项目添加编辑功能。我已将/edit路由器添加到我的classroom.js文件中，然后我通过应用程序编辑该标志，并在控制台日志中获得POST /classroom/edit 404 398.484 ms - 1355。在浏览器控制台日志中，我得到：

App.js:32 POST http://localhost:3002/classroom/edit 404 (Not Found)
App.js:52 Error: Bad response from server
    at App.js:40

React：App.js

import React, { Component } from 'react';
import './App.css';

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      toggle: false,
      toggleIdx: 0,
      classroom: [],
      flagreason: '',
      msg: ''
    };
    this.eventHandler = this.eventHandler.bind(this);
    this.logChange = this.logChange.bind(this);
    this.handleEdit = this.handleEdit.bind(this);
  }

  logChange(e) {
    this.setState({
      [e.target.name]: e.target.value
    });
  }

  handleEdit(event) {
    event.preventDefault()
    var data = {
      flagreason: this.state.flagreason,
      id: this.state.toggleIdx
    }
    fetch("/classroom/edit", {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(data)
    }).then(function(response) {
      if (response.status >= 400) {
        throw new Error("Bad response from server");
      }
      return response.json();
    }).then(function(data) {
      console.log(data)
      if (data === "success") {
        this.setState({
          msg: "Flag Reason has been edited."
        });
        console.log('Successful Update!');
      }
    }).catch(function(err) {
      console.log(err)
    });
  }

  eventHandler(event, idx) {
    this.setState((prevState) => ({
        toggle: !prevState.toggle,
        toggleIdx: idx
      })
    );
  }

  componentDidMount() {
    fetch("/classroom")
    .then(res => res.json())
    .then(classroom => this.setState({ classroom }))
  }

  render() {
    return (
      <div className="App">
                <div className="wrapper">
                    <h1>Classroom</h1>
                    {this.state.classroom.map((classroom, idx) =>
                        <div className="child" key={classroom.id}>
              <p className="detail">Child's Name: <span className={classroom.childflagged}>{classroom.childsname}</span> <i title={classroom.flagreason} className={'fa fa-flag flag' + classroom.childflagged}></i><i title={classroom.starreason} className={'fa fa-star star' + classroom.starstudent}></i></p>
              <p className="detail">Parent's Phone Number: {classroom.parentsnumber}</p>
              <div className="actionMenu">
                <button className="flags" id={classroom.id} onClick={e => this.eventHandler(e, idx)}>Edit Flags</button>
                <button className="results">View Results</button>
                <button className="profile">View Profile</button>
              </div>
              <div className="actionForm">
                <div>
                  <form id={"flagform" + classroom.id} className={(this.state.toggle && (this.state.toggleIdx === idx)) ? '' : 'hide'} onSubmit={this.handleEdit} method="post" autoComplete="no">
                    <input type="hidden" name="id" value={classroom.id} />
                    <input type="text" onChange={this.logChange} value={this.state.flagreason} name="flagreason" placeholder="Reason For Flag" />
                    <input type="submit" name="submit" value="Save Changes" />
                  </form>
                </div>
              </div>
            </div>
          )}
                </div>
      </div>
    );
  }
}

export default App;

快递：app.js

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var index = require('./routes/index');
var classroom = require('./routes/classroom');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', index);
app.use('/classroom', classroom);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

app.listen(3001);

module.exports = app;

classroom.js

var express = require('express');
var router = express.Router();
var mysql = require('mysql');

var pool = mysql.createPool({
  connectionLimit : 30,
  host: 'localhost',
  user: 'root',
  password: 'password',
  database: 'dbname'
});

/* GET Classroom listing. */
router.get('/', function(req, res, next) {

    console.log('A Client Requested Data...');

  pool.query('SELECT * FROM classroom ORDER BY childsname ASC', function(err, results) {
    if (err) throw err
    var array = [];
    for(var i = 0, len = results.length; i < len; i++) {
      array.push(results[i]);
    }

        res.json(array);
    });

});

/* EDIT Child Flag */

router.get('/edit', function(req, res, next) {

  console.log('A flag was edited...');

  pool.query("UPDATE classroom SET flagreason = '"+req.body.flagreason+"' WHERE id = '"+req.body.id+"'", function (err, results, fields) {
      if(err) throw err;
      res.send(JSON.stringify(results));
  });
});

module.exports = router;

任何人都可以帮助我，展示我需要改变的内容，然后解释为什么它不起作用所以我可以从错误中吸取教训吗？

Answer 1

您需要更新服务器上classroom.js文件的一部分才能使用post方法：

router.post('/edit', function(req, res, next) {

  console.log('A flag was edited...');

  pool.query("UPDATE classroom SET flagreason = '"+req.body.flagreason+"' WHERE id = '"+req.body.id+"'", function (err, results, fields) {
      if(err) throw err;
      res.send(JSON.stringify(results));
  });
});

目前它正在等待GET请求并且您正在发送POST，因此它不知道如何处理它。其余的应该没问题。

Answer 2

根据提供的代码，似乎有2个问题导致404.第一个是在您的反应代码中您正在发出get请求，但路由为/classroom/edit

第二个问题是，在您的反应代码中，您尝试访问/edit，但根据提供的代码，它应该只是post。

<强>更新

如果提供了额外的代码，问题似乎是因为您试图将get转换为/classroom/edit路线。

反应代码中的路由实际上应该是post，路由处理程序应该更改为{{1}}。

找不到React JS和Express POST路由404

2 个答案: