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

Question

请注意，我在react ProductScreen.js中呈现动态数据时有问题

注意，...数据在product.js中呈现得很好，但相同的数据在productscreen.js中不会呈现，因为productscreen.js链接是通过“id”呈现的。

谢谢app.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'导入产品从'React'导入{useEffect}；

//从“../data”常量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>
)

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

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，但您调用的product属性不存在const ProductScreen=（{product}）=>{}