React+Node网页Update接口报404错误排查求助

修正后的代码 #

服务端部分 #

dboperations.js

修改updateComments，改为接收ID和要更新的cmt值，返回处理结果，由API层处理响应：

var config = require('./dbconfig');
const sql = require('mssql');

async function getallcustomerOrders(){
    try{
        let pool = await sql.connect(config);
        let orders = await pool.request()
            .query("SELECT * FROM [100].[dbo].[OELINCMT_SQL] order by ID desc");
        return orders.recordsets;
    }
    catch (error){
        console.log(error);
    }
}

async function getcustomerOrders(orderNumber){
    try{
        let pool = await sql.connect(config);
        let orders = await pool.request()
            .input('input_parameter', sql.NChar, orderNumber)
            .query("SELECT ID,cmt FROM [100].[dbo].[OELINCMT_SQL] where LTRIM(ord_no) = LTRIM(@input_parameter)");
        return orders.recordsets;
    }
    catch (error){
        console.log(error);
    }
}

async function updateComments(ID, cmt){
    try {
        let pool = await sql.connect(config);
        let orders = await pool.request()
            .input('ID', sql.NChar, ID)
            .query(`SELECT ID,cmt FROM [100].[dbo].[OELINCMT_SQL] WHERE ID = @ID`);

        let order = orders.recordset.length ? orders.recordset[0] : null;
        if (order) {
            await pool.request()
                .input('ID', sql.NChar, ID)
                .input('cmt', sql.NVarChar, cmt) // 字段类型根据数据库实际情况调整
                .query(`UPDATE [100].[dbo].[OELINCMT_SQL] SET cmt = @cmt WHERE ID = @ID;`);

            return { ...order, cmt };
        } else {
            return null;
        }
    } catch (error) {
        throw error;
    }
}

module.exports = {
    getallcustomerOrders : getallcustomerOrders,
    getcustomerOrders : getcustomerOrders,
    updateComments : updateComments
}

api.js

修正PUT路由的斜杠，并传递必要参数给updateComments，处理响应：

var Db = require('./dboperations');
var dboperations = require('./dboperations');

var express = require('express');
var bodyParser = require('body-parser');
var cors = require('cors');
const { request, response } = require('express');
var app = express();
var router = express.Router();

app.use(bodyParser.urlencoded({ extended: true}));
app.use(bodyParser.json());
app.use(cors());
app.use('/api', router);

router.use((request,response,next)=> {
    console.log('middleware');
    next();
})

router.route('/customerOrder').get((request,response)=>{
    dboperations.getallcustomerOrders().then(result => {
        response.json(result[0]);
        console.log(result[0]);
    })
})

router.route('/customerOrder/:orderNumber').get((request,response)=>{
    dboperations.getcustomerOrders(request.params.orderNumber).then(result => {
        response.json(result[0]);
        console.log(result[0]);
    })
})

// 修正路由路径，添加开头的/，并处理请求体
router.route('/customerOrder/:ID').put((request,response)=>{
    const { ID } = request.params;
    const { cmt } = request.body;
    dboperations.updateComments(ID, cmt)
        .then(result => {
            if (result) {
                response.json(result);
            } else {
                response.status(404).json({ message: 'Record not found' });
            }
        })
        .catch(error => {
            response.status(500).json(error);
        })
})

var port = process.env.PORT || 5000;
app.listen(port);
console.log('Customer Order API is running at ' + port);

客户端部分 #

EmailFaxDetails.js

去掉不必要的提前获取ID的逻辑，直接传递订单号给FetchOrderDetails：

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

const EmailFaxDetails = () => {
    const [orderNumber, setOrderNumber] = useState('');
    const [isShown, setIsShown] = useState(false);

    const handleChange = event => {
        setOrderNumber(event.target.value);
    };

    const handleClick = event => {
        event.preventDefault();
        if (orderNumber.trim()) {
            setIsShown(true);
        }
    }

    return(
        <div>
            <br/><br/>
            Order Number: 
            <input 
                placeholder="Order Number" 
                type="text" 
                id="message" 
                name="message" 
                onChange={handleChange} 
                value={orderNumber} 
                autoComplete="off" 
            />
            <button onClick={handleClick}>Search</button>
            {isShown && <FetchOrderDetails ord_no={orderNumber} />}
        </div>
    )
}

export default EmailFaxDetails;

FetchOrderDetails.js

给每条记录单独添加Update按钮，获取对应输入框的值，传递单个ID发起PUT请求：

import React, { useEffect, useState } from 'react'
import axios from 'axios'
import '../App.css';

const FetchOrderDetails = ({ord_no}) => {
    const [data, setData] = useState([]);

    const url = `http://localhost:5000/api/customerOrder/${ord_no}`
    useEffect(() => {
        axios.get(url)
            .then(response => {
                setData(response.data)
            })
            .catch((err) => console.log(err));
    }, [url]);

    const handleUpdate = (orderId) => {
        // 获取当前记录对应的输入框值
        const inputElement = document.getElementById(`salesAck-${orderId}`);
        const updatedCmt = inputElement.value;

        axios.put(`http://localhost:5000/api/customerOrder/${orderId}`, { cmt: updatedCmt })
            .then((response) => {
                if (response.status === 200) {
                    alert("Comment successfully updated");
                    // 更新本地状态，不需要重新请求
                    setData(prev => prev.map(item => 
                        item.ID === orderId ? { ...item, cmt: updatedCmt } : item
                    ));
                } else Promise.reject();
            })
            .catch((err) => alert("Something went wrong"));
    }

    if(data.length > 0) {
        return(
            <div>
                {data.map((order) => (
                    <div key={order.ID}>
                        <br/>
                        ID : {order.ID}
                        <br/>
                        Email/Fax: 
                        <input 
                            defaultValue={order.cmt} 
                            placeholder="Sales Ack Email" 
                            id={`salesAck-${order.ID}`} 
                            style={{width: "370px"}} 
                        />
                        <button onClick={() => handleUpdate(order.ID)}>Update</button>
                    </div>
                ))}
          </div>
        )
    }
    return (
        <h1>Something went wrong, please contact IT!</h1>
    )
}

export default FetchOrderDetails;

内容的提问来源于stack exchange，提问作者Glenn94