React JS购物车组件问题：传参及页面显示异常排查

数据老陈

2026-7-12

问题解决：将Cart作为独立路由页面，与Foodinfo实现父子组件数据同步且不在Foodinfo显示Cart

问题描述

已实现购物车功能，但当前购物车直接显示在Foodinfo页面底部，点击相关按钮后跳转至空白页面。需求是将Foodinfo作为父组件、Cart作为子组件，传递数据的同时不在Foodinfo页面显示Cart组件。

解决方案步骤

为Cart配置独立路由页面，解决跳转空白问题
移除Foodinfo中直接渲染的Cart组件
调整Foodinfo的按钮逻辑，实现添加商品后跳转至Cart页面
让Cart组件从localStorage同步购物车数据，保证数据一致性

1. 配置路由（App.js）

首先在路由配置中添加Cart的独立路由：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Foodinfo from './Foodinfo';
import Cart from './Cart';
import Home from './Home'; // 你的首页组件

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/food/:id" element={<Foodinfo />} />
        <Route path="/cart" element={<Cart />} /> {/* 添加Cart路由 */}
      </Routes>
    </Router>
  );
}

export default App;

2. 修改Foodinfo组件

移除页面底部的Cart渲染，调整按钮逻辑：

import React, { useState, useEffect } from 'react';
import { Link, useParams } from 'react-router-dom';
import data from './data.json';

export default function Foodinfo() {
    const params = useParams();
    const [item, setItem] = useState(null);
    const { products } = data;
    const [cartItems, setCartItems] = useState([]);

    const onAdd = (product) => {
        const exist = cartItems.find((x) => x.id === product.id);
        let newCartItems;
        if (exist) {
            newCartItems = cartItems.map((x) =>
                x.id === product.id ? { ...exist, qty: exist.qty + 1 } : x
            );
        } else {
            newCartItems = [...cartItems, { ...product, qty: 1 }];
        }
        setCartItems(newCartItems);
        localStorage.setItem('cartItems', JSON.stringify(newCartItems));
    };

    const onRemove = (product) => {
        const exist = cartItems.find((x) => x.id === product.id);
        let newCartItems;
        if (exist.qty === 1) {
            newCartItems = cartItems.filter((x) => x.id !== product.id);
        } else {
            newCartItems = cartItems.map((x) =>
                x.id === product.id ? { ...exist, qty: exist.qty - 1 } : x
            );
        }
        setCartItems(newCartItems);
        localStorage.setItem('cartItems', JSON.stringify(newCartItems));
    };

    useEffect(() => {
        const savedCart = localStorage.getItem('cartItems');
        if (savedCart) {
            setCartItems(JSON.parse(savedCart));
        }
    }, []);

    useEffect(() => {
        const idFromUrl = parseInt(params.id, 10);
        // 修正商品查找逻辑：从products数组中匹配
        const foundItem = products.find((d) => d.id === idFromUrl);
        setItem(foundItem);
    }, [params.id, products]);

    return (
        <div>
            {item ? (
                <div className="flex flex-wrap border-4 border-red-500 rounded-[25px] bg-white mt-12 md:mt-24 mx-auto justify-center max-w-[80%] md:max-w-[50%]">
                    <h2 className="my-auto py-5 mx-auto md:text-2xl">{item.title}</h2>
                    <img src={item.pic} alt={item.name} className="w-[400px] h-[300px] mx-auto pb-5 md:mt-5" />
                    <div className="flex flex-col mx-auto">
                        <h1 className="font-bold text-center md:my-auto md:text-2xl">Item Info</h1>
                        <p className="my-3 mx-auto text-center md:my-auto md:text-2xl">{item.info}</p>
                        <p className="text-center md:my-auto md:text-2xl md:pb-3"><strong>Single:</strong> {item.single}</p>
                        <p className="text-center mb-3 md:my-auto md:text-2xl md:pb-3"><strong>Combo:</strong> {item.combo}</p>
                        <p className="text-center mb-3 md:my-auto md:text-2xl md:pb-3"><strong>Calories:</strong> {item.calories}</p>
                    </div>
                </div>
            ) : (
                <p>Loading...</p>
            )}
            <div className="flex justify-center my-7 space-x-20 text-white font-semibold">
                <Link to="/">
                    <button className="bg-red-500 rounded-3xl w-28 border-2 border-red-700 hover:bg-red-600">Menu</button>
                </Link>
                {/* 调整添加购物车逻辑：先添加再跳转 */}
                <button
                    onClick={() => {
                        item && onAdd(item);
                        window.location.href = '/cart';
                    }}
                    className="bg-red-500 rounded-3xl w-28 border-2 border-red-700 hover:bg-red-600"
                >
                    Add To Cart
                </button>
                {/* 添加单独的查看购物车按钮 */}
                <Link to="/cart">
                    <button className="bg-red-500 rounded-3xl w-28 border-2 border-red-700 hover:bg-red-600">View Cart</button>
                </Link>
            </div>
            {/* 移除此处的Cart组件渲染 */}
        </div>
    );
}

3. 修改Cart组件

让Cart组件自行从localStorage读取数据，保留商品增减逻辑：

import React, { useState, useEffect } from 'react';

export default function Cart() {
    const [cartItems, setCartItems] = useState([]);

    const onAdd = (product) => {
        const exist = cartItems.find((x) => x.id === product.id);
        let newCartItems;
        if (exist) {
            newCartItems = cartItems.map((x) =>
                x.id === product.id ? { ...exist, qty: exist.qty + 1 } : x
            );
        } else {
            newCartItems = [...cartItems, { ...product, qty: 1 }];
        }
        setCartItems(newCartItems);
        localStorage.setItem('cartItems', JSON.stringify(newCartItems));
    };

    const onRemove = (product) => {
        const exist = cartItems.find((x) => x.id === product.id);
        let newCartItems;
        if (exist.qty === 1) {
            newCartItems = cartItems.filter((x) => x.id !== product.id);
        } else {
            newCartItems = cartItems.map((x) =>
                x.id === product.id ? { ...exist, qty: exist.qty - 1 } : x
            );
        }
        setCartItems(newCartItems);
        localStorage.setItem('cartItems', JSON.stringify(newCartItems));
    };

    useEffect(() => {
        const savedCart = localStorage.getItem('cartItems');
        if (savedCart) {
            setCartItems(JSON.parse(savedCart));
        }
    }, []);

    const itemsPrice = cartItems.reduce((a, c) => a + c.qty * c.price, 0);
    const taxPrice = itemsPrice * 0.14;
    const shippingPrice = itemsPrice > 2000 ? 0 : 20;
    const totalPrice = itemsPrice + taxPrice + shippingPrice;

    return (
        <div className="counter">
            <h1>CART YO</h1>
            <div>
                {cartItems.length === 0 && <div>Cart is empty</div>}
                {cartItems.map((item) => (
                    <div key={item.id}>
                        <div>{item.name}</div>
                        <div>
                            <button onClick={() => onRemove(item)}>-</button>
                            <button onClick={() => onAdd(item)}>+</button>
                        </div>
                        <div>
                            {item.qty} x ${item.price?.toFixed(2)}
                        </div>
                    </div>
                ))}
                {cartItems.length !== 0 && (
                    <div>
                        <hr />
                        <div>
                            <p>Items Price</p>
                            <p>${itemsPrice.toFixed(2)}</p>
                        </div>
                        <div>
                            <p>Tax Price</p>
                            <p>${taxPrice.toFixed(2)}</p>
                        </div>
                        <div>
                            <p>Shipping Price</p>
                            <p>${shippingPrice.toFixed(2)}</p>
                        </div>
                        <div>
                            <p>Total Price</p>
                            <p>${totalPrice.toFixed(2)}</p>
                        </div>
                        <hr />
                        <div>
                            <button onClick={() => alert('Proceed to Checkout!')}>
                                Checkout
                            </button>
                        </div>
                    </div>
                )}
            </div>
        </div>
    );
}

关键说明

通过路由配置让Cart成为独立页面，解决跳转空白问题
移除Foodinfo中的Cart组件渲染，实现不在Foodinfo页面显示购物车的需求
利用localStorage实现Foodinfo和Cart之间的数据同步，保证购物车状态一致
修正了Foodinfo中商品查找的逻辑错误，确保能正确匹配对应商品

内容的提问来源于stack exchange，提问作者Metalmilitian85

React JS购物车组件问题：传参及页面显示异常排查

问题描述 #

解决方案步骤 #

1. 配置路由（App.js） #

2. 修改Foodinfo组件 #

3. 修改Cart组件 #