首先 先開啟產品頁面
咒語:將每個商品加上加入購物車內容 並且把title 跟price 使用一個購物車物件存起來以備之後購物車頁面查看

 (
    <RootContainer>
      <ParallaxContainer>
        <ParallaxContent>
          <Typography variant="h4" component="h1" color="primary">
            歡迎來到我們的網站
          </Typography>
          <Typography variant="h6" color="primary">
            探索最新的商品
          </Typography>
        </ParallaxContent>
      </ParallaxContainer>
      <ProductGrid>
        {products.map((product, index) => (
          <Grid item xs={12} sm={6} md={4} lg={4} key={index}>
            <ProductItem>
              <img src={product.image} alt={product.title} />
              <Typography variant="h6">{product.title}</Typography>
              <Typography variant="body1" color="textSecondary">
                價格: {product.price}
              </Typography>
              <Button
                variant="contained"
                color="primary"
                onClick={() => addToCart(product)}
                sx={{ marginTop: "10px" }} // 使用 sx 設置樣式
              >
                加入購物車
              </Button>
            </ProductItem>
          </Grid>
        ))}
      </ProductGrid>
    </RootContainer>
  );

咒語:把 const [cart, setCart] = useState([]); 拉到app層 並且用useContext 傳遞資料

解析 就會把app建立一個Context 給全域使用 ，其中能用的參數為 value={{ cart, setCart, token, setToken }}

export const AllContext = createContext (null);
function App() {
  const [token, setToken] = useState(localStorage.getItem("token"));
  const [cart, setCart] = useState([]);

  return (
    <AllContext.Provider value={{ cart, setCart, token, setToken }}>
      {" "}
      {/* 使用 CartProvider 包裹整個應用 */}
      <Router>
        <AppBar position="static">
          <Toolbar>
            <Typography variant="h6" mr={2}>
              鐵人賽
            </Typography>
            <NavLinks>
              <ul>
                <li>
                  <Link to="/">首頁</Link>
                </li>
                <li>
                  <Link to={token === "1" ? "/member" : "/login"}>
                    {token === "1" ? "會員" : "登入"}
                  </Link>
                </li>
                <li>
                  <Link to="/product">商品介紹</Link>
                </li>
                <li>
                  <Link to="/cart">購物車</Link>
                </li>
              </ul>
            </NavLinks>
          </Toolbar>
        </AppBar>
        <Container>
          <AppWrapper>
            <Routes>
              <Route path="/" element={<Home />} />
              <Route path="/login" element={<Login />} />
              <Route path="/product" element={<Product />} />
              <Route path="/cart" element={<Cart />} /> {/* 使用 Cart 頁面 */}
              <Route path="/member" element={<Member />} />
            </Routes>
          </AppWrapper>
        </Container>
      </Router>
    </AllContext.Provider>
  );
}

export default App;

咒語:那這樣在 Product 頁面要怎樣使用AllContext

import { AllContext } from "../App";

//略
  const AC = useContext(AllContext);
  const [cart, setCart] = useState([]); //刪除此行
  
 // 把這兩個參數改成全域使用
    const addToCart = (product) => {
    // 添加商品到購物車
    AC.setCart([...AC.cart, product]);
  };

咒語:使用mui挑選適合的元件，建立一個購物車元件 並且把cart 資料引入 可以做顯示刪除 還有結帳按鈕

import React, { useContext } from "react";
import { AllContext } from "../App";
import {
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Paper,
  Button,
  IconButton,
} from "@mui/material";
import DeleteIcon from "@mui/icons-material/Delete";

function Cart() {
  const { cart, setCart } = useContext(AllContext);

  const removeFromCart = (productId) => {
    console.log(productId, "productId");
    // 根據商品 ID 刪除購物車中的商品
    const updatedCart = cart.filter((product) => product.id !== productId);
    setCart(updatedCart);
  };

  const checkout = () => {
    // 在此處執行結帳邏輯
    alert("結帳成功！感謝您的購買。");
    setCart([]); // 清空購物車
  };

  return (
    <div>
      <h2>購物車</h2>
      <TableContainer component={Paper}>
        <Table>
          <TableHead>
            <TableRow>
              <TableCell>商品名稱</TableCell>
              <TableCell>價格</TableCell>
              <TableCell>操作</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {cart.map((product, index) => (
              <TableRow key={index}>
                <TableCell>{product.title}</TableCell>
                <TableCell>${product.price}</TableCell>
                <TableCell>
                  <IconButton
                    aria-label="刪除"
                    onClick={() => removeFromCart(product.id)}
                  >
                    <DeleteIcon />
                  </IconButton>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
      <Button variant="contained" color="primary" onClick={checkout}>
        結帳
      </Button>
    </div>
  );
}

export default Cart;

刪除點下去 發現會發生錯誤

查看原始資料 少了個id
找到產品頁面

  const generateFakeProducts = (count) => {
    const products = [];
    for (let i = 0; i < count; i++) {
      const productName = `商品${i + 1}`;
      const price = Math.floor(Math.random() * 1000);
      const product = {
        image: `https://picsum.photos/200/200?random=${i}`,
        title: productName,
        price: `$${price}`,
        id: i,// 這裡加上id
      };
      products.push(product);
    }
    return products;
  };

這樣子簡易的購物車清單就做完了