TypeError：无法读取未定义反应的属性“id”

Posted 2023-02-25

【中文标题】TypeError：无法读取未定义反应的属性“id”

【英文标题】：TypeError: Cannot read property 'id' of undefined react

【发布时间】：2021-06-26 17:57:37

【问题描述】：

我有一个 product.js 文件。我想通过 id 读取数据，例如 http://localhost:3000/product/2 (/product/:id)。但它告诉我 TypeError: Cannot read property 'id' of undefined react。 我只想按产品 ID 阅读我的产品。我阅读了我所有的产品。但是当我想读取单个数据时，它会显示此错误。我认为它的道具问题。请帮帮我。 我给我的文件。 我的 product.js 文件。

exports.products = [
  
    _id: '1',
    name: 'Airpods Wireless Bluetooth Headphones',
    image: '/images/airpods.jpg',
    description:
      'Bluetooth technology lets you connect it with compatible devices wirelessly High-quality AAC audio offers immersive listening experience Built-in microphone allows you to take calls while working',
    brand: 'Apple',
    category: 'Electronics',
    price: 89.99,
    countInStock: 10,
    rating: 4.5,
    numReviews: 12,
  ,
  
    _id: '2',
    name: 'iPhone 11 Pro 256GB Memory',
    image: '/images/phone.jpg',
    description:
      'Introducing the iPhone 11 Pro. A transformative triple-camera system that adds tons of capability without complexity. An unprecedented leap in battery life',
    brand: 'Apple',
    category: 'Electronics',
    price: 599.99,
    countInStock: 7,
    rating: 4.0,
    numReviews: 8,
  ,
  
    _id: '3',
    name: 'Cannon EOS 80D DSLR Camera',
    image: '/images/camera.jpg',
    description:
      'Characterized by versatile imaging specs, the Canon EOS 80D further clarifies itself using a pair of robust focusing systems and an intuitive design',
    brand: 'Cannon',
    category: 'Electronics',
    price: 929.99,
    countInStock: 5,
    rating: 3,
    numReviews: 12,
  ,
  
    _id: '4',
    name: 'Sony Playstation 4 Pro White Version',
    image: '/images/playstation.jpg',
    description:
      'The ultimate home entertainment center starts with PlayStation. Whether you are into gaming, HD movies, television, music',
    brand: 'Sony',
    category: 'Electronics',
    price: 399.99,
    countInStock: 11,
    rating: 5,
    numReviews: 12,
  ,
  
    _id: '5',
    name: 'Logitech G-Series Gaming Mouse',
    image: '/images/mouse.jpg',
    description:
      'Get a better handle on your games with this Logitech LIGHTSYNC gaming mouse. The six programmable buttons allow customization for a smooth playing experience',
    brand: 'Logitech',
    category: 'Electronics',
    price: 49.99,
    countInStock: 7,
    rating: 3.5,
    numReviews: 10,
  ,
  
    _id: '6',
    name: 'Amazon Echo Dot 3rd Generation',
    image: '/images/alexa.jpg',
    description:
      'Meet Echo Dot - Our most popular smart speaker with a fabric design. It is our most compact smart speaker that fits perfectly into small space',
    brand: 'Amazon',
    category: 'Electronics',
    price: 29.99,
    countInStock: 0,
    rating: 4,
    numReviews: 12,
  ,
]

// export default products;

我的应用，js

import logo from './logo.svg';
import './App.css';
import 
  BrowserRouter as Router,
  Switch,
  Route,
  Link
 from "react-router-dom";

import Home from './components/home/Home';
import Nav from './components/home/Nav';
import Footer from './components/home/Footer';
import Single from './components/home/Single';
// import AdminHome from './components/admin/AdminHome';

function App() 
  return (
    <Router>
    <div>
    <Nav />
        <Switch>
          <Route  exact  path="/"><Home /></Route>
          <Route    path="/product/:id"><Single /></Route>

        </Switch>
    <Footer/>
    </div>
  </Router>
  );


export default App;

我的Single.js

import React,  Component,useState ,useEffect from 'react'
import axios from "axios";
import products from "../../products"
const Single = ( match ) => 
    const product = products.find((p) => p._id === match.params.id)

    return (
        <div>

            product.name

        </div>
    )


export default Single

如何使用我的道具？ 那么如何通过 ID 读取我的单个数据。 谢谢。

【参考方案1】：

你可以从react-router-dom使用useParams

import React,  Component,useState ,useEffect from 'react'
import axios from "axios";
import products from "../../products"
import 
  
  useParams
 from "react-router-dom";
const Single = ( match ) => 
      let  id  = useParams();
    const product = products.find((p) => p._id === id)

    return (
        <div>

            product.name

        </div>
    )


export default Single

见here

【参考方案2】：

在 Single.js 中，您应该将props 作为参数，或者如果您想直接使用match，则将其解构。

如果你没有得到道具，你可以使用withRouter() HOC for Single。

示例（我已经对其进行了解构以获取 id）：

...
import  withRouter  from "react-router-dom";
...

 const Single = (
  match: 
    params:  id 
  
) => 
  const product = products.find((p) => p._id === id);
  return <div>product.name</div>;
;

export default withRouter(Single);

Here's a working CodeSandBox replica for this