Axios向Laravel发送多维数组时后端接收为空问题求解

核心问题出在前端JavaScript的数据构造和请求发送逻辑：

• 你使用Array类型存储带非数字键（日期字符串、非连续数字下标）的键值对结构，JS数组在执行JSON.stringify()序列化时，只会处理数字索引的元素，所有字符串key挂载的自定义属性、非连续下标对应的空槽位都会被忽略，这就是为什么后端收到的嵌套数据全部丢失。
• 你直接把顶层数组作为Axios请求体发送，没有指定字段名，Laravel无法将请求体解析为weeksMeals请求参数，所以$request->weeksMeals取值为null。

前端调整 #

1. 所有存储键值对的结构从数组[]替换为普通对象{}，不要用数组存非连续索引、字符串key的内容，修改数组生成逻辑：

// 初始结构改为对象
let weeksMeals = {};

if (weeksMeals.hasOwnProperty(week)) {
    if (weeksMeals[week].hasOwnProperty(day)) {
        weeksMeals[week][day].push([
            meal.options[meal.selectedIndex].value, 
            gram.options[gram.selectedIndex].value
        ]);
    } else {
        weeksMeals[week][day] = [];
        weeksMeals[week][day].push([
            meal.options[meal.selectedIndex].value, 
            gram.options[gram.selectedIndex].value
        ]);
    }
} else {
    weeksMeals[week] = {}; // 周维度的结构也改为对象
    weeksMeals[week][day] = [];
    weeksMeals[week][day].push([
        meal.options[meal.selectedIndex].value, 
        gram.options[gram.selectedIndex].value
    ]);
}

2. 调整Axios发送逻辑，明确将weeksMeals作为请求字段传递，不要直接把数组作为整个请求体：

Axios.post('/meal-plans/set-weeks-meals', {
    weeksMeals: weeksMeals
}).then((response) => {
    console.log(response.data)
});

发送前可以先执行console.log(JSON.stringify(weeksMeals))验证序列化结果，正常会输出类似{"1":{"2022-07-12":[["1","1"]],"2022-07-13":[["2","2"]]},"2":{"2022-07-14":[["1","2"],["2","3"]]}}的完整结构，不会再出现数组length为0但属性挂在实例上的异常情况。

后端调整 #

原有逻辑基本可用，增加简单参数校验避免空值写入Session即可：

public function setWeeksMeals(Request $request)
{
    $validated = $request->validate([
        'weeksMeals' => 'required|array'
    ]);
    session()->put('weeks_meals', $validated['weeksMeals']);
    return response()->json([
        'status' => true, 
        'weeksMeals' => $validated['weeksMeals']
    ], 200);
}

调整后接口即可正常接收完整的多维数组结构，存入Session的内容也会和前端构造的结构一致。

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