<p>我正忙于客户管理系统，该系统还跟踪客户订单。我已经设置了一个 CRUD API 来处理后端数据库数据的读写，但是当我尝试将购物车数据 POST 到数据库时，出现以下错误。</p>
<blockquote>
<p>quote 从响应中解析 JSON 时出错：SyntaxError: 意外的标记 '<', " 不是有效的 JSON</p>
<p>接收以下内容而不是有效的 JSON：<!-- ErrorException: 未定义的数组键
文件中的“名称”
C:\Users\mjver\OneDrive\Documents\Coding\client-api\routes\api.php 上
第238行</p>
</blockquote>
<p>我已将输入数据检查到客户端的 $data["name"] 数组中，但看不到任何错误。我已经检查了拼写错误和拼写错误以及所有这些，我希望一些新的眼睛可以提供帮助。</p>
<p>我的前后端代码片段如下：</p>
<p>调用api.js中的API调用函数：</p>
<pre class="brush:php;toolbar:false;">async sendOrder(){
console.log(this.cart);
const order = await APIController.CreateOrder(this.cart.name, this.cart.qty, this.cart.option, this.cart.price, this.orderNum, this.cart.fee, this.cart.date, this.id);
if(order){
store.dispatch('clearCart');
}
},</pre>
<p>api.js 文件中的 API 调用：</p>
<pre class="brush:php;toolbar:false;">CreateOrder: (name, qty, option, price, orderNo, fee, date, userId) => {
let responseClone;
const csrfToken = document.cookie.match(/XSRF-TOKEN=([^;]+)/)[1];
if(
name == "" ||
qty == "" ||
option == "" ||
price == "" ||
orderNo == "" ||
date == "" ||
userId == ""
) {
return false;
} else {
return fetch(API_BASE + "/orders/create", {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-CSRF-TOKEN": csrfToken
},
body: JSON.stringify({ name, qty, option, price, orderNo, fee, date, userId })
}).then((response) => {
responseClone = response.clone();
return response.json()
})
.then(data => {
if(data.success){
alert("Order created successfully!")
return true;
} else {
throw data.response.error;
}
}, (rejectionReason) => {
console.log('Error parsing JSON from response: ', rejectionReason, responseClone);
responseClone.text()
.then((bodyText) => {
console.log('Receiving the following instead of valid JSON: ', bodyText);
});
}).catch(err => {
alert(err);
});
}
},</预>
<p>api.php文件中的php路由：</p>
Route::post('/orders/create', function(Request $request){
$data = $request->all();
if(!Orders::where('orderNo', '=', $data['orderNo'])->exists()){
$order = 订单::创建([
“姓名” => $data[“名称”],
“数量” => $data[“数量”],
“选项” => $data[“选项”],
“订单号” => $data[“订单号”],
“用户ID” => $data[“用户ID”],
“价格” => $data[“价格”],
“费用” => $data[“费用”],
“日期” => $data[“日期”],
]);
if(空($order->id)){
返回 [
“成功” =>错误的，
“响应” => [
“错误” => “发生了异常错误”
]
];
} 别的 {
返回 [
“成功” =>真的，
“响应” => [
“订单” => $订单
]
];
}
} 别的 {
返回 [
“成功” =>错误的，
“响应” => [
“错误” => “库存项目已存在”
]
];
}
});</pre>
<p>我的订单模型文件：</p>
class Orders 扩展 Model
{
使用 HasFactory；
受保护的$可填充= [
'产品'，
'数量',
'选项'，
'订单号'，
'用户身份'，
'价格'，
'费用'，
'日期'，
];
公共函数乘积 (){
返回 $this->hasMany(Product::class);
}
}</pre>
<p>如果您能帮助我解决这个问题，我将不胜感激，因为我已经为此苦苦挣扎了一段时间。</p> 
我设法弄清楚了。我 console.log(this.cart.name) 并发现它是“未定义”。经过进一步调查，我发现原因是 state.cart 是一个对象数组，而不仅仅是一个对象。当然，原因是购物车中的每个单独的商品都应该是它自己的对象。所以我的解决方案是：
for(let i = 0; i <= this.cart.length - 1; i++){ try { const order = await APIController.CreateOrder(this.cart[i].name, this.cart[i].qty, this.cart[i].option, this.cart[i].price, this.orderNum, this.cart[i].fee, this.cart[i].date, this.id); if(order){ this.clearCart(); } } catch (error){ console.log(error); } }分解：由于 this.cart 是一个数组而不是一个对象，我必须首先使用 for 循环来获取购物车中每个项目的索引，然后调用将数据发布到数据库的函数。