コードレビュー上級約20分

レビュー: 状態管理の問題

typescriptreactstate-managementhooks

コードレビュー課題

以下のReact + TypeScriptコードをレビューしてください。

背景

ショッピングカート機能を実装したコンポーネントです。状態管理に複数の問題があります。

レビュー観点

状態の不変性
状態更新のパターン
useReducerの活用
派生状態の計算

あなたの回答

ShoppingCart.tsxtypescript

import React, { useState } from 'react';
 
interface CartItem {
  id: number;
  name: string;
  price: number;
  quantity: number;
}
 
function ShoppingCart() {
  const [items, setItems] = useState<CartItem[]>([]);
  const [totalPrice, setTotalPrice] = useState(0);
 
  const addItem = (item: CartItem) => {
    // 既存アイテムをチェック
    const existing = items.find(i => i.id === item.id);
    if (existing) {
      existing.quantity += item.quantity;
      setItems(items);
    } else {
      items.push(item);
      setItems(items);
    }
    
    // 合計金額を更新
    setTotalPrice(totalPrice + item.price * item.quantity);
  };
 
  const removeItem = (id: number) => {
    const index = items.findIndex(item => item.id === id);
    if (index >= 0) {
      const removedItem = items[index];
      items.splice(index, 1);
      setItems(items);
      setTotalPrice(totalPrice - removedItem.price * removedItem.quantity);
    }
  };
 
  return (
    <div>
      <h2>Shopping Cart</h2>
      <p>Total: ${totalPrice}</p>
      <ul>
        {items.map(item => (
          <li key={item.id}>
            {item.name} - ${item.price} × {item.quantity}
          </li>
        ))}
      </ul>
    </div>
  );
}
 
export default ShoppingCart;

行番号をクリックしてコメントを追加（Shift+クリックで範囲選択）

レビューサマリー

最低100文字必要です

承認判定

全体の重大度

コメントを追加し、サマリーを100文字以上入力してください

模範解答

回答を送信するか、「表示する」をクリックすると模範解答が表示されます。