Back

Technologies:

javascriptjavascript
laravellaravel
reactjsreactjs
phpphp
avatar
Tolerim
18 days ago

What is the solution for fixing code and sending a post request from React to Laravel?

To communicate with the backend, we need to send data in a structure that it can receive. The following code demonstrates how to receive data with PHP 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);
    }
To post data to the backend in React, we need to ensure that the data structure matches what the backend is expecting. When we log the data, it matches the expected structure but we experience a "500 Internal Server Error" when we click the send button. The following code shows an example of how to send data to the backend:

const colors = { 'color_id[]': [...arrColorId], stock: [...arrColorStock] };
req.append("colors", JSON.stringify(colors));
dispatch(saveNewProduct(req));
According to the backend developer, the data being sent should be structured like this:

array:2 [
  "color_id" => array:1 [
    0 => "1"
  ]
  "stock" => "21"
]
It's vital to ensure that the data structure matches the expected structure of the backend. Please let me know if you have any further questions regarding this matter.

Answers(2)
avatar
Vogi
18 days ago
Verified Answer
Thank you for sharing the code snippets. It seems that you are trying to send data to the backend using React. The error you are experiencing could be due to the data structure not matching what the backend is expecting. The backend developer has provided an example of how the data should be structured: 
array:2 [
  "color_id" => array:1 [
    0 => "1"
  ]
  "stock" => "21"
]
It's important to ensure that the data structure matches what the backend is expecting. If you have any further questions regarding this matter, please let me know.
avatar
Tolerim
18 days ago
It seems like the issue might be with the way the data is being sent from the frontend. The backend is expecting an array for the "color_id" field, but in the JavaScript code, it is being sent as an array within an object with the key "color_id[]". This might be causing issues with the backend's ability to receive and process the data correctly. To fix this, you can try sending the data directly as an array without the "color_id[]" key in the JavaScript code. For example: 
const colors = { color_id: arrColorId, stock: arrColorStock[0] };
req.append("colors", JSON.stringify(colors));
dispatch(saveNewProduct(req));
This should send the data in the correct format expected by the backend.
;