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

Question

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

前端是reactjs，后端是node/express

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

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

现在我尝试了不同的解决方案和方法来解决这个问题，检查问题是否可能与 react-router-dom(useParams)，后端 server/api(get request and find single product ) 或通过 axios 获取单个产品的前端，但由于我在使用 axios 获取所有产品时在 HomeScreen 页面上做同样的事情，我无法弄清楚为什么它可能不适用于单个产品，我使用 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...

Using elements instead of components means we don't have to provide a passProps-style API so you can get the props you need to your elements.

要访问路由参数，请使用 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 ])

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

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

javascript

node.js

express

reactjs

mern