我遇到了一個問題，無論我做了多少研究/谷歌搜索，我似乎都無法解決這個問題，過去 2 天一直在處理這個錯誤，首先我試圖在網上找到其他人可能有的任何答案，但我不能似乎弄明白了，所以現在我需要問一個更有經驗的人我做錯了什么，請看一下我的錯誤和代碼圖片，看看你是否會發現一些我看不到的東西......隧道視野..
前端是 reactjs，后端是 node/express
當我打開主螢屏頁面時，每個產品都從后端加載，沒問題，但是一旦我單擊單個產品嘗試獲取具有唯一 ID 的特定產品頁面，初始骨架會在短時間內加載而沒有任何產品資訊，在因以下錯誤而崩潰之前
“未處理的拒絕（型別錯誤）：無法讀取未定義的屬性（讀取‘引數’）”
現在我嘗試了不同的解決方案和方法來解決這個問題，檢查問題是否可能與 react-router-dom(useParams)、后端服務器/api（獲取請求并查找單個產品）或通過 axios 獲取單個產品的前端有關，但由于我在主螢屏頁面上做同樣的事情，同時使用 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
提前致謝
uj5u.com熱心網友回復：
看起來您正在嘗試ProductScreen通過 props訪問組件內的路由引數。React Router v6 不會將 props 傳遞給元素......
<Route path='/product/:id' element={<ProductScreen />} />
從遷移指南...
使用元素而不是組件意味著我們不必提供
passProps-style API 以便您可以獲得元素所需的道具。
要訪問路由引數，請使用params鉤子
// ...
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 ])
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/370137.html
標籤：javascript 节点.js 反应 表达 默恩