應(yīng)用程序.js:import React, { Fragment } from "react";import Header from "./components/Header";import PostList from "./components/PostList";import Post from "./components/Post";import TagList from "./components/TagList";import { BrowserRouter as Router, Switch, Route } from "react-router-dom";const App = () => { return ( <Fragment> <Router> <Header /> <Switch> <Route exact path="/" component={PostList} /> <Route path="/tags" component={TagList} /> <Route path="/posts/:id" component={Post} /> </Switch> </Router> </Fragment> );};export default App;郵政.js:import React, { useEffect, useState } from "react";import Tag from "./Tag";import { useParams } from "react-router-dom";import axios from "axios";const Post = () => { const { id } = useParams(); const [post, setPost] = useState({}); useEffect(() => { const fetchPost = async () => { try { const res = await axios.get(`/api/posts/${id}`); setPost(res.data); } catch (err) { console.error(err); } }; fetchPost(); }, []); return ( <div> <h2>{post.title}</h2> <p>{post.text}</p> <div> {post.tags.map((tag) => ( <Tag key={tag._id} tag={tag} /> ))} </div> </div> );};export default Post;我正在嘗試建立一個(gè)簡單的博客網(wǎng)站的框架并運(yùn)行,但我在使用 Post 組件時(shí)遇到了問題。當(dāng)使用路線“/posts/:id”導(dǎo)航到特定帖子時(shí),應(yīng)該從我的 API 獲取帖子的 useEffect 似乎沒有運(yùn)行,并且不可避免地會出現(xiàn)“post.tags 未定義”錯(cuò)誤。其他一切都工作正常 - API 按預(yù)期響應(yīng)來自 Postman 的請求,并且“useParams”從 URL 中獲取帖子 id 很好 - 只是 useEffect 根本沒有運(yùn)行(也沒有顯示)console.logs。我在以前的項(xiàng)目中以這種方式做事沒有遇到任何問題 - 事實(shí)上 TagList 組件中的 useEffect 幾乎是相同的,并且 /tags 路由按預(yù)期工作,所以我不確定我錯(cuò)過了什么?
使用 React Router 導(dǎo)航到頁面時(shí) useEffect 根本不運(yùn)行
智慧大石
2023-11-02 22:35:45