ProductScreen.js:12 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'params')

Question

我遇到了一个问题，无论我做了多少研究/谷歌搜索，我似乎都无法解决这个问题，过去 2 天一直在处理这个错误，首先我试图在网上找到其他人可能有的任何答案但我似乎无法弄清楚，所以现在我需要向更有经验的人询问我做错了什么，请看看我的错误和代码图片，看看你是否能抓住我无法理解的东西......隧道视野。 .

前端是 reactjs，后端是 node/express

当我打开主屏幕页面时，每个产品都从后端加载，没有问题，但是一旦我单击单个产品以尝试获取具有唯一 ID 的特定产品页面，初始骨架会在短时间内加载而没有任何产品信息，在崩溃之前出现以下错误

“未处理的拒绝（TypeError）：无法读取未定义的属性（读取'params'）”

现在我尝试了不同的解决方案和方法来解决这个问题，检查问题是否可能与 react-router-dom(useParams)、后端服务器/api(获取请求并查找单个产品)或获取单个的前端产品通过 axios，但由于我在 HomeScreen 页面上做同样的事情，同时使用 axios 获取所有产品，我无法弄清楚为什么它可能不适用于单个产品，我使用 useState 和 useEffect 从后端 api 获取单个产品。

这里是单品画面，至少是fetch部分

import React, { useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
import { Row, Col, Image, ListGroup, Card, Button } from 'react-bootstrap'
import Rating from '../components/Rating'
import axios from 'axios'

const ProductScreen = ({ match }) => {
const [product, setProduct] = useState({})

useEffect(() => {
    const fetchProduct = async () => {
        const { data } = await axios.get(`/api/products/${match.params.id}`)
        setProduct(data)
    }

    fetchProduct()
}, [match])

服务器文件

const express = require('express')
const products = require('./data/products')

const app = express()

app.get('/', (req, res) => {
res.send('API is running...')
})

app.get('/api/products', (req, res) => {
res.json(products)
})

app.get('/api/products/:id', (req, res) => {
const product = products.find((p) => p._id === req.params.id)
res.json(product)
})

app.js 文件

   import React from 'react'
   import { BrowserRouter as Router, Route, Routes } from 'react- 
   router-dom'
   import { Container } from 'react-bootstrap'
   import Header from './components/Header'
   import Footer from './components/Footer'
   import HomeScreen from './pages/HomeScreen'
   import ProductScreen from './pages/ProductScreen'

   const App = () => {
   return (
   <Router>
   <Header />
        <main className='py-3'>
            <Container>
                <Routes>
                    <Route path='/' element={<HomeScreen />} exact />
                    <Route path='/product/:id' element={<ProductScreen />} />
                </Routes>
            </Container>
        </main>
        <Footer />
    </Router>
)
}

export default App

提前致谢

Answer 1

您似乎正在尝试通过道具访问 ProductScreen 组件中的路由参数。 React Router v6 不会将 props 传递给 elements...

<Route path='/product/:id' element={<ProductScreen />} />

来自migration guide...

使用元素而不是组件意味着我们不必提供 passProps 样式的 API，因此您可以获得元素所需的道具。

要访问路由参数，请使用params hook

// ...
import { useParams } from "react-router-dom";

const ProductScreen = () => {
  const [product, setProduct] = useState({})
  const { id } = useParams()

  useEffect(() => {
    const fetchProduct = async () => {
      const { data } = await axios.get(`/api/products/${encodeURIComponent(id)}`)
      setProduct(data)
    }

    fetchProduct()
  }, [ id ])