第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會有你想問的

使用 React Router 導(dǎo)航到頁面時(shí) useEffect 根本不運(yùn)行

使用 React Router 導(dǎo)航到頁面時(shí) useEffect 根本不運(yùn)行

智慧大石 2023-11-02 22:35:45
應(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ò)過了什么?
查看完整描述

1 回答

?
SMILET

TA貢獻(xiàn)1796條經(jīng)驗(yàn) 獲得超4個(gè)贊

useEffect僅在第一次渲染時(shí)運(yùn)行,如果指定的依賴項(xiàng)已更改,則在任何其他渲染時(shí)運(yùn)行。由于您添加了一個(gè)空數(shù)組,因此它們永遠(yuǎn)不會改變。

如果想useEffect在post id更改后再次運(yùn)行,則需要添加id為useEffect的依賴。

useEffect(() => {
  ....
}, [id, setPost]);

另外,你的post.tags意志仍然是未定義的,因?yàn)閿?shù)據(jù)是在組件完成渲染之后出現(xiàn)的,所以你應(yīng)該在返回之前檢查是否有發(fā)布數(shù)據(jù),如果沒有發(fā)布數(shù)據(jù),則返回 null 或加載骨架。


查看完整回答
反對 回復(fù) 2023-11-02
  • 1 回答
  • 0 關(guān)注
  • 309 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號