Laravel中JS数组传递至控制器方法失败的问题求助

问题场景 #

我有页面、Laravel控制器和JS文件，需求是将一个span元素内容与两个tbody的内容存入6个数组和1个变量，通过控制器获取这些数据后在数据库中创建新行。目前两个按钮均通过axios.post向Database.php控制器传递数据，但只有第一个按钮正常工作，第二个按钮触发时返回Failed to load resource: the server responded with a status of 500 (Internal Server Error)。

查看Laravel日志发现具体报错：

local.ERROR: count(): Argument #1 ($value) must be of type Countable|array, null given

报错位置是尝试统计$ItemExpense数组长度的代码行，同时$ItemIncome的值也为null。但通过alert()验证，JS代码中这两个数组并非空数组，且另外4个数组能通过$request->input()正常获取。

相关代码 #

Database.php 控制器代码 #

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
use Illuminate\Support\Facades\Log;

class Database extends Controller
{
    public function Publish(Request $request){

        $iduser = $request->session()->get('id');
        date_default_timezone_set('Europe/Kyiv');
        $date = date("Y/m/d");
        $AmountIncome = $request->input('AmountIncome');
        $PriceIncome = $request->input('PriceIncome');
        $AmountExpense = $request->input('AmountExpense');
        $PriceExpense = $request->input('PriceExpense');
        $ItemExpense = $request->input('ItemExpense');
        $ItemIncome = $request->input('ItemIncome');
        $Profit = $request->input('Profit');
        $Profit = floatval($Profit);

        // 需求：
        // 1. 插入利润数据
        // 2. 创建收入、支出两张表
        // 3. 填充两张表数据
        $tableprofitname = "profit_" . $iduser;
        DB::table($tableprofitname)->insert([
            'profit' => $Profit,
            'date' => $date,
        ]);
        Schema::create("income_" . $iduser . "_" . strval($date), function (Blueprint $table) {
            $table->id();
            $table->string('item')->unique();
            $table->integer('amount');
            $table->float('price');
        });

        Schema::create("expense_" . $iduser . "_" . strval($date), function (Blueprint $table) {
            $table->id();
            $table->string('item')->unique();
            $table->integer('amount');
            $table->float('price');
        });

        $expenselength = count($ItemExpense);
        $incomelength = count($ItemtIncome);
        for($i = 0;$i<$expenselength;$i++){
            DB::table("expense_" . $iduser . "_" . strval($date))->insert([
                'item' => $ItemExpense[$i],
                'amount' => $AmountExpense[$i],
                'price' => $PriceExpense[$i],
            ]);
        }
        for($i = 0;$i<$incomelength;$i++){
            DB::table("income_" . $iduser . "_" . strval($date))->insert([
                'item' => $ItemIncome[$i],
                'amount' => $AmountIncome[$i],
                'price' => $PriceIncome[$i],
            ]);
        }

        return;
    }
}

js.js 前端代码 #

function C(id, Class, dltnumber) {
    cD = [];
    columnElements = document.querySelectorAll(id + " " + Class);
    number = 0;
    columnElements.forEach(function (element) {
        if (dltnumber == null) {
            cD.push(element.value);
        } else {
            if (number != dltnumber) {
                cD.push(element.value);
            }
        }
        number += 1;
    });
    return cD;
}  
function PostPublish() {
    var id = "#tbl-income";
    C2_1 = C(id, ".c1");
    C2_2 = C(id, ".c2");
    C2_3 = C(id, ".c3");
    id = "#tbl-expense";
    C1_1 = C(id, ".c1");
    C1_2 = C(id, ".c2");
    C1_3 = C(id, ".c3");
    var result = document.getElementById("outcome").innerText;
    axios
        .post("/publish", {
            ItemIncome: C2_1,
            IemExpense: C1_1,
            AmountIncome: C2_2,
            PriceIncome: C2_3,
            AmountExpense: C1_2,
            PriceExpense: C1_3,
            Profit: result,
        })
        .then(function (response) {
            console.log(response.data);
        })
        .catch(function (error) {
            console.log(error);
        });
}

问题原因与修正 #

经排查，两处拼写错误直接导致了500错误：

1. JS参数名拼写错误：
   Axios请求中传递的参数名是IemExpense，但控制器中用$request->input('ItemExpense')接收，参数名不匹配导致$ItemExpense为null。
   修正：将JS中IemExpense改为ItemExpense。

2. 控制器变量名拼写错误：
   控制器中$incomelength = count($ItemtIncome)里的$ItemtIncome多了一个字母t，正确变量名应为$ItemIncome，拼写错误导致变量未定义，值为null，调用count()时触发类型错误。
   修正：将$ItemtIncome改为$ItemIncome。

修正后的关键代码片段 #

修正后的JS请求部分

axios
    .post("/publish", {
        ItemIncome: C2_1,
        ItemExpense: C1_1, // 修正参数名
        AmountIncome: C2_2,
        PriceIncome: C2_3,
        AmountExpense: C1_2,
        PriceExpense: C1_3,
        Profit: result,
    })

修正后的控制器计数部分

$expenselength = count($ItemExpense);
$incomelength = count($ItemIncome); // 修正变量名

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