如何在表单正文中获取（orderId）有效负载值以更新订单状态？

Posted 2023-03-11

【中文标题】如何在表单正文中获取（orderId）有效负载值以更新订单状态？

【英文标题】：How to grab (orderId) payload value in form body to update the status of the order?

【发布时间】：2021-05-08 18:17:15

【问题描述】：

我正在做 mern stack 电子商务项目。我有一个订单更新路线。订单状态仅由管理员更新。在更新订单状态时，管理员会获得默认（预加载）状态。然后管理员输入新状态进行更新。 当我在输入字段中输入（接受）并点击更新按钮时，它会显示这一点并且状态可能不会更新。 我无法获取 orderID 。

这是我的更新状态后端控制器

exports.updateStatus = (req, res) =>   Order.updateOne(
 _id: req.body.orderId ,
 $set:  status: req.body.status  ,
 new: true, useFindAndModify: false ,
(err, order) => 
  if (err) 
    return res.status(400).json( error: "Cannot update order status" );
  
  res.json(order);
 );;

更新订单路线

 router.put(
  "/order-update/:userId",
  isSignedIn,
  isAuthenticated,
  isAdmin,
  updateStatus
);

前端 API 处理程序

export const updateOrder = (userId, token, order) => 
  return fetch(`$API/order-update/$userId`, 
    method: "PUT",
    headers: 
      Accept: "application/json",
      Authorization: `Bearer $token`,
    ,
    body: JSON.stringify(order),
  )
    .then((response) => 
      return response.json();
    )
    .catch((err) => console.log(err));
;

状态更新表格

import React,  useEffect, useState  from "react";
import  isAutheticated  from "../auth/helper";
import Base from "../core/Base";
import  getOrder, updateOrder  from "./helper/adminapicall";

const UpdateOrder = ( match ) => 
  const  user, token  = isAutheticated();

  const [status, setStatus] = useState("");
  const [error, setError] = useState(false);
  const [success, setSuccess] = useState(false);

  const preload = (orderId) => 
    getOrder(orderId, user._id, token).then((data) => 
      console.log(data);
      if (data?.error) 
        setError(data?.error);
       else 
        setStatus(data.status);
        setError("");
        setSuccess("");
      
    );
  ;

  useEffect(() => 
    preload(match.params.orderId);
  , []);

  const handleChange = (event) => 
    setError(false);
    setStatus(event.target.value);
    setSuccess(false);
  ;

  const onSubmit = (e) => 
    e.preventDefault();
    setError("");
    setSuccess("");
    updateOrder(user._id, token,  status ).then((data) => 
      if (data?.error) 
        setError(true);
       else 
        setError("");
        setSuccess(true);
        setStatus("");
      
    );
  ;

  const successMessage = () => (
    <div
      className="alert alert-success mt-3"
      style= display: success ? "" : "none" 
    >
      <h4>updation successfull</h4>
    </div>
  );

  const warningMessage = () => (
    <div
      className="alert alert-success mt-3"
      style= display: error ? "" : "none" 
    >
      <h4>updation failedl</h4>
    </div>
  );

  const orderUpdateForm = () => (
    <form>
      <div className="form-group col-md-6">
        <p className="lead">Update Order Status</p>
        <input
          type="text"
          className="form-control my-3 col-md-6"
          onChange=handleChange
          value=status
          autoFocus
          required
        />
        <button onClick=onSubmit className="btn btn-outline-info col-md-6">
          Update Order
        </button>
      </div>
    </form>
  );

  return (
    //
    <Base title="Update Order Status" description="">
      successMessage()
      warningMessage()
      orderUpdateForm()
    </Base>
    //
  );
;

export default UpdateOrder;

【参考方案1】：

您正在尝试从正文中获取 orderId，但您没有在正文中发送 OrderId。另外，我无法理解您为什么在路由“/order-update/:userId”中发送 UserId。 我认为您可以从前端发送 orderId 作为请求参数，也可以将路线更新为

router.put(
  "/order-update/:orderId",
  isSignedIn,
  isAuthenticated,
  isAdmin,
  updateStatus
);

之后就可以得到orderId为

  let  orderId  = req.params;

【讨论】：

router.put( "/order-update/:orderId", isSignedIn, isAuthenticated, isAdmin, updateStatus ) 它不起作用，因为 /:userId 是必需的，因为只有管理员才能更新订单状态

updateOrder(user._id, token, status ).then((data) => if (data?.error) setError(true); else setError(""); setSuccess(true); setStatus(""); ); 但从前端，您也没有在 body 中传递 orderId 。您应该在正文中传递它，以便您可以在 API 控制器中获取它。

是的....我明白了` const onSubmit = (event) => event.preventDefault(); setValues( ...values, 错误: false ); updateOrder(user._id, token, status, orderId ) .then(console.log(match.params.orderId), (data) => if (data.error) setValues( ...values, error : data.error, success: false ); else setValues( ...values, status: "", orderId: "", success: true, error: false, ); ) .catch((错误）=> 控制台日志（错误））； ;`