MERN:在使用POST等待获取时获得400个错误请求

Question

我被困试图发送一些数据到Firebase，我得到400错误坏请求(它说null)。这是一段代码:

const submitOrderHandler = async (userData) => {
setIsSubmitting(true);
await fetch("https://movieserp-default-rtdb.firebaseio.com/orders.json", {
method: 'POST',
BODY: JSON.stringify({
user: userData,
orderedItems: cartCtx.items,
}),
});
setIsSubmitting(false);
setDidSubmit(true);
cartCtx.clearCart();
};

我很确定userData和cartCtx。项不为空，事实上，我使用控制台日志发送了输出，数据正是我输入的，我也确信firebase数据库已经启动，实际上我做了一个GET请求，它工作。

我的问题是:为了得到这份工作，我错过了什么?

这是组件的全部代码:

import React, { useContext, useState } from "react";
import Modal from "../UI/Modal";
import CartItem from "./CartItem";
import classes from "./Cart.module.css";
import CartContext from "../store/cart-context";
import OrderDetails from "./OrderDetails";
const Cart = (props) => {
const [isCheckout, setIsCheckout] = useState(false);
const [isSubmitting, setIsSubmitting] = useState(false);
const [didSubmit, setDidSubmit] = useState(false);
const cartCtx = useContext(CartContext);
const totalAmount = `$${cartCtx.totalAmount.toFixed(2)}`;
const hasItems = cartCtx.items.length > 0;
const cartItemRemoveHandler = (id) => {
cartCtx.removeItem(id);
};
const cartItemAddHandler = (item) => {
cartCtx.addItem({...item, amount: 1});
};
const orderHandler = () => {
setIsCheckout(true);
};
const submitOrderHandler = async (userData) => {
setIsSubmitting(true);
await fetch("https://movieserp-default-rtdb.firebaseio.com/orders.json", {
method: 'POST',
BODY: JSON.stringify({
user: userData,
orderedItems: cartCtx.items,
}),
});
setIsSubmitting(false);
setDidSubmit(true);
cartCtx.clearCart();
};
const cartItems = (
<ul className={classes["cart-items"]}>
{cartCtx.items.map((item) => (
<CartItem
key={item.id}
name={item.name}
amount={item.amount}
price={item.price}
onRemove={cartItemRemoveHandler.bind(null, item.id)}
onAdd={cartItemAddHandler.bind(null, item)}
/>
))}
</ul>
);
const modalActions = (
<div className={classes.actions}>
<button className={classes["button--alt"]} onClick={props.onClose}>
Close
</button>
{hasItems && (
<button className={classes.button} onClick={orderHandler}>
Order
</button>
)}
</div>
);
const CartModalContent = (
<React.Fragment>
{cartItems}
<div className={classes.total}>
<span>Total Amount</span>
<span>{totalAmount}</span>
</div>
{isCheckout && (
<OrderDetails onConfirm={submitOrderHandler} onCancel={props.onClose} />
)}
{!isCheckout && modalActions}
</React.Fragment>
);
const isSubmittingModalContent = <p>Sending order data...</p>;
/* incluir transaccion para verificar si es exitoso o hubo algun error */
const didSubmitModalContent = (
<React.Fragment>
<p>Successfully sent the order!</p>
<div className={classes.actions}>
<button className={classes.button} onClick={props.onClose}>
Close
</button>
</div>
</React.Fragment>
);
return (
<Modal onClose={props.onClose}>
{!isSubmitting && !didSubmit && CartModalContent}
{isSubmitting && isSubmittingModalContent}
{!isSubmitting && didSubmit && didSubmitModalContent}
</Modal>
);
};
export default Cart;

谢谢你。

Answer 1

在fetch调用中尝试body(小写)代替BODY(大写)。