昨天有說到 因為丟給js的collection 並不好準確地用JavaScropt來取得我們需要的資料，因此我們需要再丟到畫面之前把資料好好地整理一下。
首先先創建一個Product Variable，路徑我選擇開在：project/React/src/Variable/ProductVariable.php

我們先把基本的ProductVariable寫起來~
ProductVariable

<?php 
namespace React\Variable; 
class ProductVariable 
{ 
    private $product_title; 
    private $product_description; 
    private $product_image; 
    private $product_price; 
    public function __construct($orig_data) 
    { 
        $this->product_title = $orig_data->name; 
        $this->product_description = $orig_data->description; 
        $this->product_image = $orig_data->images->first()->image_path; 
    } 
    /** 
     * @return mixed 
     */ 
    public function getProductTitle() 
    { 
        return $this->product_title; 
    } 
    /** 
     * @param mixed $product_title 
     */ 
    public function setProductTitle($product_title): void 
    { 
        $this->product_title = $product_title; 
    } 
    /** 
     * @return mixed 
     */ 
    public function getProductDescription() 
    { 
        return $this->product_description; 
    } 
    /** 
     * @param mixed $product_description 
     */ 
    public function setProductDescription($product_description): void 
    { 
        $this->product_description = $product_description; 
    } 
     
    /** 
     * @return mixed 
     */ 
    public function getProductImage() 
    { 
        return $this->product_image; 
    } 
    /** 
     * @param mixed $product_image 
     */ 
    public function setProductImage($product_image): void 
    { 
        $this->product_image = $product_image; 
    } 
    /** 
     * @return mixed 
     */ 
    public function getProductPrice() 
    { 
        return $this->product_price; 
    } 
    /** 
     * @param mixed $product_price 
     */ 
    public function setProductPrice($product_price): void 
    { 
        $this->product_price = $product_price; 
    } 
}

接下來可能會有疑問，為什麼construct裡面沒有price？因為在不同的情況下會有不同的price，因此我想要在物件外使用set的方式將數值寫入。

接下來我們就可以回到controller 稍微修改一下後端的程式：
HomeController

public function index() 
{ 
    $user_type = 'NORMAL'; 
    if(Auth::check()){ 
        $user = Auth::user(); 
        $user_type = $user->type; 
    } 
    $render_product = []; 
    foreach($this->product_service->productRelation()->get() as $key => &$product){ 
        $new_product = new ProductVariable($product); 
        $new_product->setProductPrice($product->prices->where('user_type',$user_type)->first()->price); 
        array_push($render_product, $new_product); 
    } 
    return Inertia::render('Home', [ 
        'product' => $render_product, 
    ]); 
}

Home.jsx

export default function Home({product}){ 
    return( 
        <div> 
            <div className="flex flex-wrap"> 
                { 
                    product.map( value => { 
                        return <ProductList key={value.product_title} title={value.product_title} price={value.product_price} description={value.product_description} image={value.product_image} /> 
                    }) 
                } 
            </div> 
        </div> 
    ); 
}

後來到畫面發現，jsx接收到的資料居然都是空的！回去檢查後端發現，我把ProductVariable之中的屬性都設置成私有，必須要使用get function才能取出QQ
因此把ProductVariable 的private都改成public，重新回到畫面上看，我們成功的將完整的資料傳送給前端並正確顯示啦！

目前做的畫面互動性不高，實在想不出來可以在哪裡套用前十天學到的React技巧
不過專案還是要推進，商品列表就先暫時長這樣XD，明天就進行到商品的個別頁面吧！