使用 React Router 导航到页面时 useEffect 根本不运行

Question

应用程序.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;

我正在尝试建立一个简单的博客网站的框架并运行，但我在使用 Post 组件时遇到了问题。当使用路线“/posts/:id”导航到特定帖子时，应该从我的 API 获取帖子的 useEffect 似乎没有运行，并且不可避免地会出现“post.tags 未定义”错误。其他一切都工作正常 - API 按预期响应来自 Postman 的请求，并且“useParams”从 URL 中获取帖子 id 很好 - 只是 useEffect 根本没有运行（也没有显示）console.logs。

我在以前的项目中以这种方式做事没有遇到任何问题 - 事实上 TagList 组件中的 useEffect 几乎是相同的，并且 /tags 路由按预期工作，所以我不确定我错过了什么？

Answer 1

useEffect仅在第一次渲染时运行，如果指定的依赖项已更改，则在任何其他渲染时运行。由于您添加了一个空数组，因此它们永远不会改变。如果想useEffect在post id更改后再次运行，则需要添加id为useEffect的依赖。useEffect(()&nbsp;=>&nbsp;{ &nbsp;&nbsp;.... },&nbsp;[id,&nbsp;setPost]);另外，你的post.tags意志仍然是未定义的，因为数据是在组件完成渲染之后出现的，所以你应该在返回之前检查是否有发布数据，如果没有发布数据，则返回 null 或加载骨架。