React中实现点击添加购物车按钮同步商品信息至头部购物车的问题

核心思路 #

Navigationbar（Header）和Iphone属于兄弟组件，无法直接共享状态，因此需要将购物车状态提升至共同父组件App中，通过props传递状态与操作方法，实现组件间数据通信。

具体修改步骤 #

1. 修改App.js #

在App组件中维护购物车状态，并传递给需要的子组件：

// app.js
import 'bootstrap/dist/css/bootstrap.min.css';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Navigationbar from "./header";
import Home from "./Home";
import ContactForm from "./Contact";
import RegistrationForm from "./SignUp";
import LogIn from "./LogIn";
import Footer from "./footer";
import Iphone from "./Iphone";
import Sony from "./Sony";
import Oneplus from "./Oneplus";
import Nokia from "./Nokia";
import Vivo from "./Vivo";
import Oppo from "./Oppo";
import Cart from "./Cart";
import { useState } from "react";

function App() {
  // 存储购物车商品列表
  const [cart, setCart] = useState([]);

  // 添加商品到购物车的方法
  const addToCart = (product) => {
    setCart(prevCart => [...prevCart, product]);
  };

  return (
    <div className="App">
       <Router>
         {/* 传递cart给Navigationbar，用于显示商品数量 */}
         <Navigationbar cart={cart} />
         <div className="pages">
         <Switch>
           <Route exact path='/' component={Home}/>
           <Route path='/Contact' component={ContactForm}/>
           <Route path='/SignUp' component={RegistrationForm}/>
           <Route path='/LogIn' component={LogIn}/>
           {/* 传递addToCart方法给Iphone组件 */}
           <Route path='/Iphone' render={() => <Iphone onAdd={addToCart} />}/>
           <Route path='/Oppo' component={Oppo}/>
           <Route path='/Sony' component={Sony}/>
           <Route path='/Oneplus' component={Oneplus}/>
           <Route path='/Vivo' component={Vivo}/>
           <Route path='/Nokia' component={Nokia}/>
           {/* 传递cart给Cart组件，用于渲染商品 */}
           <Route path='/Cart' render={() => <Cart cart={cart} />}/>
         </Switch>
       </div>
       <Footer />
     </Router>
   </div>
 );
}

export default App;

2. 修改Header.js #

接收cart props并显示购物车商品数量：

// Header.js
import { Nav, Navbar, NavLink } from "react-bootstrap";
import { Link } from "react-router-dom";
import React from "react";

const Navigationbar = ({ cart }) => {
  return (
    <header>
      <h1>
        iStore
        <img src="/apple.png" className="apple" alt="Brand logo" />
      </h1>
      <Navbar collapseOnSelect expand="sm" variant="dark" style={{paddingBottom:0}}>
        <Navbar.Toggle aria-controls="navbarScroll" data-bs-target="#navbarScroll" />
        <Navbar.Collapse id="navbarScroll">
          <Nav>
            <NavLink eventKey="1" as={Link} to="/">Home</NavLink>
            <NavLink eventKey="2" as={Link} to="/Contact">Contact</NavLink>
            <NavLink eventKey="3" as={Link} to="/SignUp">SignUp</NavLink>
            <NavLink eventKey="4" as={Link} to="/LogIn">LogIn</NavLink>
          </Nav>
        </Navbar.Collapse>
        <form role="search">
          <input className="search me-4" type="search" placeholder="Search" aria-label="Search"/>
          <button className="btn btn-outline-success" type="submit">Search</button>
        </form>
        <div className="Cartdiv">
          {/* 显示购物车商品数量 */}
          <p>{cart.length}</p>
          <NavLink style={{paddingTop:0}} eventKey="5" as={Link} to="/Cart">
            <button className="cart">
              <img src="cart.png" className="cart" alt="Cart icon"/>
            </button>
          </NavLink>
        </div>
      </Navbar>
    </header>
  );
}

export default Navigationbar;

修正了原代码中Style、class的React规范问题，补充了图片alt属性

3. 修改Iphone.js #

移除冗余状态，直接传递当前商品信息到父组件：

// iphone.js
import React from "react";

const iphone = [
  {productid:1, name:"iphone1", image:"/iphone9.jpg"},
  {productid:2, name:"iphone2", image:"/iphone2.jpg"},
  {productid:3, name:"iphone3", image:"/iphone3.jpg"},
  {productid:4, name:"iphone4", image:"/iphone15.jpg"},
  {productid:5, name:"iphone5", image:"/iphone20.webp"},
  {productid:6, name:"iphone6", image:"/iphone6.jpg"},
  {productid:7, name:"iphone7", image:"/iphone7.jpg"},
  {productid:8, name:"iphone8", image:"/iphone8.jpeg"}
];

function Iphone({ onAdd }){
  // 点击按钮时传递当前商品的name和image
  const handleAddToCart = (item) => {
    onAdd({ name: item.name, image: item.image });
  };

  return (
    <div className="iphonefurther">
      <div className="row">
        {iphone.map((item) => {
          return (
            <div className="col-lg-3 col-md-6 col-sm-6 elementss zoom" key={item.productid}>
              <div className="container111">
                <img className="iphoness" src={item.image} alt={item.name} />
                <h5>{item.name}</h5>
                <button 
                  type="button" 
                  style={{width:"186px"}} 
                  onClick={() => handleAddToCart(item)} 
                  className="btn btn-dark"
                >
                  Add to Cart
                </button>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default Iphone;

移除了不必要的form标签，补充了列表项key属性，修正了class为className

4. 补充Cart组件实现 #

如果尚未创建Cart.js，可使用以下代码渲染购物车商品：

// Cart.js
import React from "react";

const Cart = ({ cart }) => {
  return (
    <div className="cart-page p-4">
      <h2>购物车</h2>
      {cart.length === 0 ? (
        <p className="text-muted">购物车是空的，快去添加商品吧！</p>
      ) : (
        <div className="cart-items d-flex flex-wrap gap-3">
          {cart.map((item, index) => (
            <div key={index} className="cart-item border p-3 rounded">
              <img 
                src={item.image} 
                alt={item.name} 
                style={{width:"100px", height:"100px", objectFit:"cover"}} 
              />
              <h4 className="mt-2">{item.name}</h4>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

export default Cart;

关键说明 #

• 状态提升：将购物车状态放在App组件，确保所有关联组件都能通过props访问或修改数据。
• 简化逻辑：移除Iphone组件中冗余的note状态，直接传递当前商品信息。
• React规范：统一使用className替代class，style采用对象形式，列表渲染必须添加key属性。

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