ErrorException：文件中未定义的数组键“名称”

Question

<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>

Answer 1

我设法弄清楚了。我 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 循环来获取购物车中每个项目的索引，然后调用将数据发布到数据库的函数。