React商品詳細ページ開発メモ

# React商品詳細ページ開発メモ（2025/06/11）

## 今日やったこと

### 1. 商品詳細ページのレビュー表示ロジック修正

- 商品レビュー一覧で「自分のレビュー」と「他ユーザーのレビュー」を分離して表示
  - `myReview`と`otherReviews`をuseSelectorで判別
  - `isMe: review.userId === Number(userId)`で自分のレビュー抽出

### 2. レビュー平均点の整数化
- 商品情報の`averageRating`が `"0.00"` のような文字列で返ってくるため、  
  `Math.floor(Number(product?.averageRating))` で整数に変換してStarRatingなどに渡すよう修正

### 3. 空文字・undefined対策
- レビュー本文`contents`や評価値が`undefined`の場合はデフォルト値で埋める（例：空文字`''`や`0`）

### 4. カート機能・商品追加APIのパラメータ整理
- `/api/orders/add_cart` APIは `productOption` を必須パラメータとして送信  
  - オプションがない商品でも `"default"` や `""` を明示的に送る

### 5. SQL INSERT文再確認
```sql
INSERT INTO cart (user_id, product_id, quantity, product_option, choose, is_deleted)
VALUES ($1, $2, $3, $4, true, false)

• product_option は必ず値を指定して渡す必要がある
• NULL不可の場合は必ず何かしら文字列で埋めること

ハマりポイント＆解決

• StarRatingやLabelコンポーネントで「数値で渡しているつもりが文字列でpropsが渡り、レンダリングエラー発生」
• SelectBoxに配列のままobjectを渡してしまい、「Objects are not valid as a React child」エラー発生
  → options配列が正しく{ label, value }構造になっているか常に要チェック
• API呼び出し後にデータは返るが画面が表示されない
  → レビューが「空」だとmyReview部分が何も描画されずに空白になる仕様だった

---

感想

• ユーザーごとのレビュー抽出や平均値計算ロジック、APIのパラメータ要件（必須/省略可）を再認識。
• UI不具合はprops型や初期値、データの型整合性を徹底的に見直すことが重要。