React 无法读取未定义的属性“”

Question

请在我的 react ProductScreen.js 中渲染动态数据时遇到问题

注意，...数据在 Product.js 中呈现良好，但在 ProductScreen.js 中未呈现相同的数据，因为 ProductScreen.js 链接是通过“id”呈现的

谢谢 应用.js

import './App.css';
import { useState, useEffect } from 'react';
import { BrowserRouter as Router, Switch, Route} from 'react-router-dom';

//Screens
import  HomeScreen from './screens/HomeScreen';
import  ProductScreen from './screens/ProductScreen';
import  CartScreen from './screens/CartScreen';

//components
import Navbar from './components/Navbar'
import Backdrop from './components/Backdrop'
import SideDrawer from './components/SideDrawer'
import AddProductScreen from './screens/AddProductScreen';
import data from './data'

function App() {

  const { products } = data;

  const [sideToggle, setSideToggle] = useState(false)

  const [cartItems, setCartItem] = useState([])

  const onAdd = (product) =>{
    const exist = cartItems.find(item => item.id === product.id)
    if (exist) {
      setCartItem(cartItems.map(item => item.id === product.id ? {...exist, qty: exist.qty + 1} : item ))
    } else{
      setCartItem([...cartItems, {...product, qty: 1}])
    }
  }
  const onRemove =(product) =>{

  }

  



  return (

    
    <Router>
      <Navbar countCartItems={cartItems.length} click={() => setSideToggle(true)}/>
      <Backdrop show={sideToggle} click={() => setSideToggle(false)} />
      <SideDrawer show={sideToggle} click={() => setSideToggle(false)} />
      {/* <HomeScreen products={ products } onAdd={ onAdd }/> */}
      {/* <CartScreen onRemove={onRemove} onAdd={onAdd} cartItems={cartItems}/> */}

      {products.map(product => (
        <h1></h1>
      ))}
      
      
      <main>
        <Switch>
          <Route exact path="/" > <HomeScreen  products={ products } onAdd={ onAdd }/> </Route>
          <Route exact path="/cart" > <CartScreen cartItems={cartItems} onRemove={ onRemove } onAdd={ onAdd }/> 
          </Route>

          <Route exact path="/product/:id" > <ProductScreen cartItems={cartItems}  onAdd={ onAdd }/> products={products} </Route>
          
          <Route exact path="/add" component={AddProductScreen} />
        </Switch>
      </main>
     </Router>
  );
}

export default App;


HomeScreen.js

导入'./HomeScreen.css'; 从“../components/Product”导入产品 从“反应”导入 { useEffect };

// 从 '../data' 导入数据 const HomeScreen = ({ onAdd, products }) => {

// const { products } = data;
return (
    <div className="homescreen">
        <h1 className="homescreen_title">Latest Products</h1>

        <div className="homescreen_products">
            {products.map(product => (
                <Product key={ product.id } product={ product } onAdd={ onAdd }/>
            )) }
        </div>
    </div>
)

}

导出默认主屏幕

ProductScreen.js

import './ProductScreen.css';

const ProductScreen = ({ products }) => {
    return (
        <div className="productscreen">
            <div className="productscreen__left">
                <div className="left__image">
                <img className="small" src={products.image} alt={product.name} />
                </div>
                <div className="left__info">
                    <p className="left__name">{products.name}</p>
                    <p >${products.price}</p>
                    <p >${products.descrption}</p>
                </div>
                
            
        </div>
    )
}

export default ProductScreen

产品.js

import React from 'react'
import { Link } from 'react-router-dom'

const Product = ({ product, onAdd }) => {
    return (
        <div>
            <img className="small" src={product.image} alt={product.name} />
            <h3>{product.name}</h3>
            <div>${product.price}</div>
            <div>
                <button onClick={()=> onAdd(product)}> Add To Cart</button>
                <button > <Link to={`/product/${product.id}`}>Features</Link></button>
            </div>
        </div>
    )
}

export default Product

Answer 1

问题是您将商品作为 cartItems <ProductScreen cartItems = {cartItems} onAdd = {onAdd} /> 发送到 ProductsScreen，但您调用的 product 属性不存在 const ProductScreen = ({product}) => {}