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

Question

我有一个 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 读取我的单个数据。 谢谢。

Answer 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

Answer 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