質問編集履歴

補足（背景）

2020/09/19 19:53

投稿

ytt451

スコア6

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -291,3 +291,201 @@
 `shopItem.quantity`に何かを代入された要因がどうしても分かりません。
 教えていただけると嬉しいです。
+# 補足（背景）
+元はReactのコードなのですが、state更新が予想と違い
+JavaScriptだけ抜き出したところ、生JSの部分が分からないと判断した経緯があります。
+原型のコードは以下のようになります。
+```tsx
+import React from 'react';
+import './tailwind.output.css';
+type Product = { id: number; title: string; price: number; quantity: number };
+type Products = Product[];
+const products: Products = [
+  { id: 1, title: '商品1', price: 100, quantity: 1 },
+  { id: 2, title: '商品2', price: 150, quantity: 1 },
+  { id: 3, title: '商品3', price: 200, quantity: 1 },
+  { id: 4, title: '商品4', price: 250, quantity: 1 },
+  { id: 5, title: '商品5', price: 300, quantity: 1 },
+];
+type SampleProps = {};
+type SampleCartState = { shopItems: Products; cartItems: Products };
+class Sample extends React.Component<SampleProps, SampleCartState> {
+  constructor(props: Readonly<SampleProps>) {
+    super(props);
+    this.state = { shopItems: products, cartItems: [] };
+    this.addToCart = this.addToCart.bind(this);
+  }
+  addToCart(shopItem: Product) {
+    let isShopItemInCart: boolean = false;
+    const cartItems: Products = [...this.state.cartItems];
+    cartItems.forEach((cartItem) => {
+      if (cartItem.id === shopItem.id) {
+        isShopItemInCart = true;
+        cartItem.quantity = Number(cartItem.quantity + shopItem.quantity);
+      }
+    });
+    this.setState({ cartItems: cartItems });
+    if (!isShopItemInCart) {
+      this.setState({ cartItems: [...cartItems, shopItem] });
+    }
+  }
+  getTotalPrice() {
+    let totalPrice: number = 0;
+    this.state.cartItems.forEach((cartItem) => {
+      totalPrice = totalPrice + cartItem.price * cartItem.quantity;
+    });
+    return totalPrice;
+  }
+  render() {
+    return (
+      <div>
+        {/* 商品一覧 */}
+        <h2 className="text-3xl">商品一覧</h2>
+        {this.state.shopItems.map((shopItem) => (
+          <div key={shopItem.id}>
+            {shopItem.title} {shopItem.price}円 × {shopItem.quantity}個{' '}
+            <button
+              className="bg-gray-400"
+              onClick={() => this.addToCart(shopItem)}
+            >
+              追加
+            </button>
+          </div>
+        ))}
+        {/* カート */}
+        <h2 className="text-3xl">カート (計 {this.getTotalPrice()}円)</h2>
+        {this.state.cartItems.map((cartItem) => (
+          <div key={cartItem.id}>
+            {cartItem.title} {cartItem.price}円 × {cartItem.quantity}個
+          </div>
+        ))}
+      </div>
+    );
+  }
+}
+export default function App() {
+  return (
+    <div className="container mx-auto px-4">
+      <Sample />
+    </div>
+  );
+}
+```