单击另一个组件时显示组件 ReactJS

Question

我有Menu组件。 我通过单击Add to Cart按钮将项目添加到Cart组件。

我还有一个购物车图标，其中包含购物车中的一系列项目。

const Menu = () => {

  const [cart, setCart] = useState([]);
  const addToCart = (el) => setCart( [...cart, el]);

  console.log(cart);

  return (
    <>
      <Tabs className="tabs-wrapper" id="menu">
      <TabList className="tabs">
        <Tab className="tab-item">Burgers</Tab>
        <Tab className="tab-item">Lunch of the day</Tab>
        <Tab className="tab-item">Crepes</Tab>
      </TabList>
      <TabPanel>
        <div className="burgers">
          <ul> 
          {burgers.map(burger => (
            <li key={burger.id}>
            <h4>{burger.title}</h4>
            <span>{burger.price}</span>
            <img src={burger.image} alt={burger.title} />
            <p>{burger.description}</p>
            <button type="submit" onClick={() => addToCart(burger, "burger")}>Add to cart</button>
            </li>
            ))}
          </ul>
        </div>
      </TabPanel>
      <TabPanel>
        <div className="lunch">
          <h4>Sweet lunch today!</h4>
          <span>7$</span>
          <p>You can choose one of our 3 sweet crepes + one of our 4 cold drinks!
            <br />
            Nutella crepe, Crepe with salted caramel and nuts or Oreo Bang crepe with whipped cream and raspberries.
            <br />
            For drink - one of our homemade lemonades - Melon, Orange or Lemon-Mint. Or a Frozen Coffee!
          </p>
          <div>
          <img src={sweetLunch} alt="Sweet crepe lunch" />
          <img src={sweetCrepes} alt="Sweet crepes lunch" />
          </div>
        </div>
      </TabPanel>
      <TabPanel>
      <div className="crepes">
          <ul>
          {crepes.map(crepe => (
            <li key={crepe.id}>
              <h4>{crepe.title}</h4>
              <span>{crepe.price}</span>
              <img src={crepe.image} alt={crepe.title} />
              <p>{crepe.description}</p>
              <button type="submit" onClick={() => addToCart(crepe, "crepe")}>Add to cart</button>
            </li>
            ))}
          </ul>
        </div>
      </TabPanel>
    </Tabs>
    <FontAwesomeIcon className="cart" icon={["fas", "shopping-cart"]} onClick={() => setCart(cart)}/>
  </>
  )
}

当我点击Cart图标时，我想让Cart组件出现在Menu组件上方，显示在右侧并占据屏幕的一半（就像您点击提要中的 jod 时在 Upwork 上一样）。

所以我尝试将Cart组件（它也包含一个Form ）导入Menu组件

const Cart = ({ cart }) => {
  const { image, title, price } = cart;

  return (
    <>
      <li>
        <img src={image} alt={title} />
        <h4>{title}</h4>
        <span>{price}</span>
      </li>
      <Form />
    </>
  )
}

并得到

TypeError: Cannot destructure property 'image' of 'cart' as it is undefined.
at Cart (Cart.jsx:6)

我的App.jsx看起来像这样

import React, { useState } from "react";
import {
  BrowserRouter as Router,
  Route,
  Switch,
  Redirect
} from "react-router-dom";

import './App.css';
import './Responsive.css';

const Header = React.lazy(() => import("./components/Header"));
const Footer = React.lazy(() => import("./components/Footer"));

const Home = React.lazy(() => import("./components/Home"));
const Menu = React.lazy(() => import("./components/Menu"));

function App() {
  const [cart, setCart] = useState([]);

  return (
    <Router>
      <React.Suspense fallback={<p className="loader">Loading...</p>}>
        <Header />
        <Switch>
          <Route path="/home" render={props => <Home {...props} />} />
          <Route path="/menu" render={props => <Menu cart={cart} {...props} />} />
          <Route exact path="/">
            <Redirect to="/home" />
          </Route>
        </Switch>
        <Footer/>
      </React.Suspense>
    </Router>
  );
}

export default App;

Answer 1

您尝试传递的道具是一张空桌子

const [cart, setCart] = useState([]);

<Menu cart={cart} />

Answer 2

经过一些重组后，我设法找到了显示购物车项目的答案

{cart.map((el) => (
        <Cart 
          key={el.id} 
          product={el} 
          removeFromCart={removeFromCart}
        />
      ))}

和 Cart 组件本身

export default function Cart ({ product, removeFromCart })  {
  const { image, title, price } =  product;