如何修复React向Laravel发送POST请求的代码问题？

后端Laravel接收代码 #

public function store(ProductRequest $request, UploadImageService $uploadImageService){
       // dd($request->all());
        $product = Product::create($request->validated());

        if ($request->hasFile('image')) {
            $uploadImageService->upload($product, 'image', 'product_images', true, false);
        }
     else{
        return response()->json(['image must be file'],422);
     }
        if ($request->has('color_image')) {
            $data=[];
            foreach ($request->color_image as $key => $images) {
                $data[]=$images;
              
              
            }
            /* dd($data); */
            foreach ($data as $image) {
             /*    dd($image); */
                $mediaItem = $product->addMedia($image)->toMediaCollection('products_images');
                $mediaItem->setCustomProperty('color_id', $key);
                
                $mediaItem->save();
            }
        }
    /*     dd('gfdd'); */
        if ($request->filled('sizes')) {
            $product->sizes()->sync($request->sizes);
        }

        if ($request->filled('categories')) {
            $product->categories()->sync($request->categories);
        }

        if ($request->filled('genders')) {
            $product->genders()->sync($request->genders);
        }
      
        if ($request->filled('colors')) {
            $colors = $request->colors;
          

            if ($product->colors()->count() > 0) {
                for ($i = 0; $i < count($colors['color_id']); $i++) {
                    $product->colors()->attach($colors['color_id'][$i], [ 'stock' => $colors['stock'][$i]]);
              
                }
              

            } else {
            
                $product->colors()->detach();
               // dd(count($colors['color_id']));
                for ($i = 0; $i < count($colors['color_id']); $i++) {
                    $product->colors()->attach($colors['color_id'][$i], [ 'stock' => $colors['stock'][$i]]);
                }
            }


        }
     
        if ($request->filled('materials')) {
            $product->materials()->sync($request->materials);
        }
    

        return $this->successResponse($product);
    }

前端React发送代码（原错误代码） #

const colors = { 'color_id[]': [...arrColorId], stock: [...arrColorStock] };
req.append("colors", JSON.stringify(colors));
dispatch(saveNewProduct(req));

后端要求的数据结构 #

array:2 [ // app/Http/Controllers/Back/ProductController.php:60
  "color_id" => array:1 [
    0 => "1"
  ]
  "stock" => "21"
]

问题原因 #

前端将colors序列化为JSON字符串后通过FormData发送，Laravel接收到的$request->colors是字符串类型，而非后端期望的数组结构。当代码执行到count($colors['color_id'])时，会因为尝试从字符串中访问数组键而抛出错误，触发500内部服务器错误。

解决办法 #

不要将colors转为JSON，直接按照Laravel期望的嵌套表单字段格式，逐个添加到FormData中：

// 循环添加color_id数组元素
arrColorId.forEach(id => {
  req.append("colors[color_id][]", id);
});

// 循环添加stock数组元素
arrColorStock.forEach(stock => {
  req.append("colors[stock][]", stock);
});

dispatch(saveNewProduct(req));

这样Laravel就能正确解析出$request->colors为数组结构，后续的循环和关联模型操作可正常执行。

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